我正在开发一个项目,其中我有几个jq UI滑块。我有一个特殊的只有5个步骤。这是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和这个片段(第一个小提琴和片段)一样平滑:
$(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个值。
我该怎么办?
答案 0 :(得分:4)
在这里: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。例如。
答案 1 :(得分:2)
关于@PVL答案的一个小小的即兴表演,我已经添加了对小提琴的过渡。
一旦用户离开手柄,它将动画显示您已经覆盖的步骤。
CODE:
$(function() {
var slider = $( "#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));
},
stop: function( event, ui ) {
$("#slider").slider('value',Math.round(ui.value));
console.log(ui);
}
});
});
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;
}
span.ui-slider-handle.ui-state-default.ui-corner-all {
transition: all .3s;
}
span.ui-slider-handle.ui-state-default.ui-corner-all.ui-state-active {
transition: none;
}
<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 :(得分:1)
将step
与.0001一起使用的问题是用户可以在整数之间选择值。一种更简单的方法是CSS过渡:
.ui-slider-handle {
transition-property: left;
transition-duration: 0.15s;
}