5个步骤顺利jquery Ui滑块

我正在一个项目中，我有几个jq UI滑块。我有一个特殊的只有5个步骤。这里是fiddle，这里是代码段（第一小提琴和摘要）：5个步骤顺利jquery Ui滑块

$(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>

我想WH用户单击并按住滑块手柄并移动手柄，它应该像小提琴和片段2一样清晰移动。但它只有5个值。
我该怎么办？

来源

2016-03-03 Shohidul Alam

在这里你去：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例子。

来源

2016-03-03 18:37:49 PVL

感谢@PVL。有效！但你能提供更平滑吗？ –

@Shohidul Alam是的，只需添加步骤：.00001例如。我有更新的代码。 – PVL

非常感谢@PVL。我其实是新的jQuery UI滑块。所以我不知道stape。你向我展示了它是什么。再次非常感谢你。 :) –

与.0001一起使用step的问题是用户可以选择整数之间的值。一种更简单的方法是CSS过渡：

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

Fiddle example

来源

2017-02-27 14:06:23

上@PVL回答一个小凑合，我已经加入过渡到小提琴。

一旦用户离开手柄，它将生成您所覆盖的步骤。

Click here to view

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>

来源

2018-01-30 13:44:46

5个步骤顺利jquery Ui滑块

回答

相关问题