Sho*_*lam 2 javascript jquery jquery-ui slider uislider
我正在开发一个项目，其中有几个 jq UI 滑块。我有一个特殊的，只有 5 个步骤。这是小提琴，这是片段（第一个小提琴和片段）：
$(function() {
$( "#slider" ).slider({
min: 1,
range: false,
max: 5,
value: 1,
animate:"slow",
orientation: "horizontal",
slide: function( event, ui ) {
$(".value").text("slider value: " + ui.value);
}
});
});body {
padding: 0px;
margin: 0px;
background-color: #333;
color: #FFF;
font-family: arial;
font-size: 20px;
}
.slider-holder {
padding: 15px;
margin: 0px;
}
.value {
margin: 15px 0px 0px 0px;
display: inline-block;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="slider-holder">
<div id="slider"></div>
<a class="value">slider value: 1</a>
</div>
</body>
</html>我想要像这个jsfiddle和这个片段（第一个小提琴和片段）一样平滑滑动：
$(function() {
$( "#slider" ).slider({
min: 1,
range: false,
max: 1000,
value: 1,
animate:"slow",
orientation: "horizontal",
slide: function( event, ui ) {
$(".value").text("slider value: " + ui.value);
}
});
});body {
padding: 0px;
margin: 0px;
background-color: #333;
color: #FFF;
font-family: arial;
font-size: 20px;
}
.slider-holder {
padding: 15px;
margin: 0px;
}
.value {
margin: 15px 0px 0px 0px;
display: inline-block;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="slider-holder">
<div id="slider"></div>
<a class="value">slider value: 1</a>
</div>
</body>
</html>我希望当用户单击并按住滑块手柄并移动手柄时，它应该像小提琴和片段 2 一样清晰地移动。但它只有 5 个值。
我该怎么做？
给你: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。