平滑 jquery Ui 滑块，有 5 个步骤

Question

我正在做一个项目，其中有几个 jq UI 滑块。我有一个特别的，只有 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>

我希望当用户单击并按住滑块手柄并移动手柄时，它应该像 fiddle 和代码片段 2 一样清楚地移动。但它只有 5 个值。
我该怎么做？

Answer 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。

Answer 2

将 step 与 .0001 一起使用的问题是用户可以 select 整数之间的值。更简单的方法是 CSS 转换：

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

Fiddle example

Answer 3

@PVL 回答的一个小即兴创作，我已将过渡添加到 fiddle。

一旦您离开句柄，它将以动画显示您已完成的步骤。

Click here to view

代码：

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

平滑 jquery Ui 滑块，有 5 个步骤

smooth jquery Ui slider with 5 steps

javascript

jquery

jquery-ui

slider

uislider