CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Samir Sheikh
Samir Sheikh

Reputation: 2401

How to reset start position of jquery range slider of bootstrap?

i want to set start position of slider on click button .

enter image description here

i try using this way but there is no change on it.

my full code .

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="bootstrap-slider.min.css">

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="modernizr.js"></script>
    <script type="text/javascript" src="bootstrap-slider.min.js"></script>

     <style type='text/css'>
        .well {
            background-color: #E0E0E0;
        }
        .slider-example {
            padding: 10px 0;
            margin: 35px 0;
        }
    </style>  

</head>
<body>
    <div class="slider-example">
         <div class="well">
            <span id="ex18-label-1" class="hidden">Example slider label</span>
            <input id="ex19" type="text"
            data-provide="slider"
            data-slider-ticks="[1, 2, 3]"
            data-slider-ticks-labels='["short", "medium", "long"]'
            data-slider-min="1"
            data-slider-max="3"
            data-slider-step="1"
            data-slider-value="3"
            data-slider-min="0"
            data-slider-tooltip="hide" />

        </div>
    <button id="start" class=''>Set</button>
    </div>


</body>
 <script type="text/javascript">
        $("#start").click(function(e) {

            // what i have try is for reset  

            $("#ex19").slider({ min: 0, value: 0, focus: true })

});
    </script>
</html>

i followed this link (http://www.jqueryrain.com/?1RE1sMzh) e.g 19

and i want output like this whenever user click on button position set at start (short) like. enter image description here

Upvotes: 3

Views: 5467

Answers (2)

Mike Doe
Mike Doe

Reputation: 17576

I needed a way to programmatically reset the form (including components) to their default values upon button press. I was struggling to make this work when a component was loaded having fixed value.

Eg. html document was loaded with a slider fixed to [2, 5] value on a [0, 10] scale. Then, when the setValue([0, 10]) was called and refreshed, handle bars moved to the [2, 5] position instead of [0, 10].

Every other answer here failed to fully reset the slider. As it turned out, I wasn't refreshing properly. So to always reset the slider one have to refresh with the {useCurrentValue: true} option set:

let $slider = $("#range-slider").slider({});

$('button').click(() => {  
  let $plugin = $slider.data('slider');

  $plugin
      .setValue([$plugin.options.min, $plugin.options.max])
      .refresh({useCurrentValue: true});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>


<main class="p-3">
    <b class="pr-2">€ 10</b> 
    <input id="range-slider" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> 
    <b class="pl-2">€ 1000</b>
</main>
<main class="p-3">
    <button class="btn btn-secondary">Reset the slider</button>
</main>

Upvotes: 0

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

Try this :-

$("#start").click(function(e) {
   var minval = $("#ex19").data('slider').min; //store slider min value
   $("#ex19").slider('setValue', minval); //set value of slider
   //other logic
});

Upvotes: 3

Related Questions