我正在开发一个项目，其中有几个 jq UI slider 。我有一个特殊的，只有 5 个步骤。这是fiddle这是片段(第一个 fiddle 和片段):
$(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和这个片段(第一个 fiddle 和片段):
$(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>我希望当用户单击并按住 slider handle 并移动 handle 时，它应该像 fiddle 和片段 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。
关于javascript - 平滑的 jquery Ui slider 有 5 个步骤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35779994/