Javascript 使用5个步骤平滑jquery Ui滑块

我正在从事一个项目，在这个项目中我有几个jqui滑块。我有一个特殊的，只有5个步骤。这是最新版本，这是片段（第一小提琴和片段）：

$（函数（）{
$（“#滑块”）.滑块({
民:1,，
范围：false，
最高：5，
价值：1，
动画：“慢”，
方向：“水平”，
幻灯片：功能（事件、用户界面）{
$（“.value”）.text（“滑块值：”+ui.value）；
}
});
});
正文{
填充：0px；
边际：0px；
背景色：#333；
颜色：#FFF；
字体系列：arial；
字体大小：20px；
}
.滑块支架{
填充：15px；
边际：0px；
}
.价值{
利润率：15px 0px 0px 0px；
显示：内联块；
}

滑块值：1
给你：p

 $(function() {
        $( "#slider" ).slider({
            min: 1,
            range: false,
            step: .0001,
            max: 5,
            value: 1,
            animate:"slow",
            orientation: "horizontal",
            slide: function( event, ui ) {
                $(".value").text("slider value: " + Math.round(ui.value));
            }
        });
    });

顺便说一句，如果您想要更平滑的效果，请执行步骤：.001。例如。
将
步骤
与.0001一起使用的问题是，用户可以在整数之间选择值。更简单的方法是CSS转换：

.ui-slider-handle {
    transition-property: left;
    transition-duration: 0.15s;
}

一个关于@PVL-answer的小即兴创作，我在小提琴上添加了过渡

一旦用户离开控制柄，它将动画化为您所涵盖的步骤


代码：


$（函数（）{
变量滑块=$（“#滑块”）。滑块({
民:1,，
范围：false，
步骤：.0001，
最高：5，
价值：1，
动画：“慢”，
方向：“水平”，
幻灯片：功能（事件、用户界面）{
$（“.value”）.text（“滑块值：”+Math.round（ui.value））；
},
停止：功能（事件、用户界面）{
$（“#slider”）.slider（'value'，Math.round（ui.value））；
控制台日志（ui）；
}
});
});
正文{
填充：0px；
边际：0px；
背景色：#333；
颜色：#FFF；
字体系列：arial；
字体大小：20px；
}
.滑块支架{
填充：15px；
边际：0px；
}
.价值{
利润率：15px 0px 0px 0px；
显示：内联块；
}
span.ui-slider-handle.ui-state-default.ui-corner-all{
过渡：全部3秒；
}
span.ui-slider-handle.ui-state-default.ui-corner-all.ui-state-active{
过渡：无；
}

滑块值：1
谢谢@PVL。成功了！但你能提供更平滑的吗？@Shohidul Alam是的，只需添加步骤：.00001例如。我已经更新了代码。非常感谢@PVL。实际上，我对jQueryUI滑块还不熟悉。所以我不知道斯塔普的事。你给我看了这是什么。再次非常感谢。：）