Change value in boostrap slider based on option select

Question

I am trying to change limit and range value of a bootstrap slider upon option select. I also tried few things but not succeeded. My Html code is :

<div class="form-group">
    <div>
            <h3>Range</h3>
    </div>
    <div class="select">
            <select name="Levels" id="limit" onchange="myChange()">
                     <option value="1">1</option>
         <option value="2">2</option>
          <option value="3">3</option>
            </select>
    </div>

JavaScript code is:

var sliderB = new Slider("#ex16b", { min: 0, max: 90, value: [0, 10], focus: true });

function myChange() {

if(document.getElementById("limit").value=="1")
{
document.getElementById("range2").value= "9";
document.getElementById("range1").value= "0";

sliderB.value="[50,70]";
$('#ex16b').slider('setValue', "[50,70]");
}


if(document.getElementById("limit").value=="2")
{
document.getElementById("range2").value= "90";
document.getElementById("range1").value= "10";


}



if(document.getElementById("limit").value=="3")
{
document.getElementById("range2").value= "120";
document.getElementById("range1").value= "0";

var RangeData = document.getElementById("ex2a");


RangeData.getAttributeNode("data-slider-value").value ="[10,20]";


}

}

CSS is:

.Widthr2 {
padding : 4px;
margin4 : 20px;
width:25px;
text-align:center;}

I am sharing jsfiddle

Please advise. Thanks

Answer 1

Try this Fiddle: http://jsfiddle.net/9uLydpz3/

The onchange="myChange()" has been removed from the HTML and replaced with a jquery change({... event notifier in the js. This is because there were problems with the initiation sequence.

The way the slider is defined has also changed to a jQuery method to facilitate easier updating.

$("#ex16b").slider({
  min: 0,
  max: 90,
  value: [0, 10],
  focus: true
});

$('#limit').change(function() {
  myChange();
});

function myChange() {

  if (document.getElementById("limit").value == "1") {
    document.getElementById("range2").value = "9";
    document.getElementById("range1").value = "0";

    $("#ex16b").slider('setValue', [50, 70]);  // this is where the setting happens
  }


  if (document.getElementById("limit").value == "2") {
    document.getElementById("range2").value = "90";
    document.getElementById("range1").value = "10";

    $("#ex16b").slider('setValue', [10, 90]);

  }



  if (document.getElementById("limit").value == "3") {
    document.getElementById("range2").value = "120";
    document.getElementById("range1").value = "0";

    $("#ex16b").slider('setValue', [0, 120]);
  }

}