CODEWITHSUNDEEP
jqueryjquery-ui
Viking
Viking

Reputation: 177

How to recive value from Jquery slider

I try set up slider http://jqueryui.com/slider/#range

  <script>
  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  } );
  </script>
</head>
<body>

<p>
  <label for="amount">Price range:</label>
  <input type="text" class="sliderJquery" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>

But I can't understand how to defind this value(which I recive when I change a range of values with two drag handles.) for the following use in filter. I try to write something like that, but it's not working

$("div[class='sliderJquery'] input").change(function(event, ui){
            leftPrice = $( "#amount" ).val(ui.values[ 0 ]);
            rightPrice = $( "#amount" ).val(ui.values[ 1 ]);
            console.log("Left: "+leftPrice);
            console.log("Right: "+rightPrice);
        });

Upvotes: 0

Views: 41

Answers (2)

Ajay Bisht
Ajay Bisht

Reputation: 585

You can get the value of slider on slider change, by attaching "change" event to the slider.

$( "#slider-range" ).slider({
   change: function( event, ui ) {
     // Get the value
     var leftValue = ui.values[0];
     var rightValue = ui.values[1];
  }
});

In case you want to set the value:

$("#slider-range").slider('values',0,10); // sets first handle with index 0 to 10
$("#slider-range").slider('values',1,30); // sets second handle with index 1 to 30

Upvotes: 3

Malcolm Vaz
Malcolm Vaz

Reputation: 131

This info. is documented in the api. 

// Getter
var values = $( ".selector" ).slider( "option", "values" );

This will save the values in the variable values

Upvotes: 0

Related Questions