Search code examples
javascriptjqueryjquery-uislideruislider

smooth jquery Ui slider with 5 steps

I am working on a project in which I have several jq UI slider. I have a special one which have only 5 steps. Here is the fiddle and Here is the snippet(First fiddle and snippet):

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

I want slide smooth like this jsfiddle and this snippet(First fiddle and snippet):

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

I want when user click and hold the slider handle and move the handle, It should move clearly like fiddle and snippet 2. But it's only have 5 values.
How can I do It?

Solution

  • Here you go :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));
            }
        });
    });

    Btw if you want even smoother effect go for step: .001 for example.