48

I am working on http://gamercity.info/ymusic/. And I am using UI slider as seek bar. While the video is played I want to invoke a seekTo(seconds) function if user clicked anywhere on the seek bar. How to get new value of seconds after click event?

10 Answers 10

80

To read slider value/percentage value at anytime:

var val = $('#slider').slider("option", "value");
29
$('#slider').slider({
    change: function(event, ui) { 
        alert(ui.value); 
    } 
});​

http://jqueryui.com/demos/slider/

2
  • @atinder - Please edit your question and provide the code you're using.
    – Ben
    May 31, 2010 at 17:05
  • how does one get the value without the slider having to change? (i.e. just read the value at some point)
    – Mala
    May 30, 2012 at 16:44
25

I checked all the answers mentioned above, but found none useful as the following code:

$('#slider').slider("values")[0]; // for slider with single knob or lower value of range
$('#slider').slider("values")[1]; // for highest value of range

Tested with jQuery v2.1.1 and jQuery-ui v1.12.1

16
var val = $("#slider").slider("value");
2
  • 5
    On newer versions of jQuery UI (1.90 in my case) it's var val = $("#slider").slider("option", "value"); This is based on the API
    – sampoh
    Sep 2, 2013 at 9:28
  • Man, why they change it to something so complicated.
    – NoName
    Nov 4, 2020 at 17:58
7
$("#slider").slider(
{
            value:100,
            min: 0,
            max: 500,
            step: 50,
            slide: function( event, ui ) {
                $( "#slider-value" ).html( ui.value );
            }
}
);

JS FIDDLE EXAMPLE : http://jsfiddle.net/hiteshbhilai2010/5TTm4/1162/

you can have a function like this

function seekTo(seek_value)
{
$("#slider").slider('option', 'value',seek_value);

}
1
var value=document.getElementById('slider').value;
var a=value.split("specialName")//name=special charcter between minimum and maximum rang
var b=a[0];//this will get minimum range
var c=a[1];//this will get maximum range
1
  // Price Slider
        if ($('.price-slider').length > 0) {
            $('.price-slider').slider({
                min: 0,
                max: 2000,
                step: 10,
                value: [0, 2000],
                handle: "square",


            });
        }



$(document).ready(function(){

 $(".price-slider").on( "slide", function( event, ui ) {  console.log("LA RECTM");  var mm = $('.tooltip-inner').text(); console.log(mm);   var divide = mm.split(':');   console.log( "min:" +divide[0] + " max:" + divide[1] )     } );




})
0
0

You can pass the value to any function or set any element with the value:

$(function () {
    $('#slider').slider({
        max: 100,
        slide: function (event, ui) {
            $('#anyDiv').val(ui.value);
        }
    });
});
0

Late to the party but this question has still unanswered.

Below example will show you how to get value on change in an input field to save in DB:

$( "#slider-videoTransparency" ).slider({            
  value: "1",
  orientation: "horizontal",
  range: "min",
  max: 30,
  animate: true,
  change: function (e, ui) {

    var value = $(this).slider( "value" );
    $('.video_overlay_transparency').val(value);
  }  
});
<div id="slider-videoTransparency" class="slider-danger"></div>

<input type="hidden" name="video_overlay_transparency" class="video_overlay_transparency" value="">

1
0

JQuery ui slider

var slider = $("#range_slider").slider({
    range: true,
    min: 0,
    max: 500,
    values: [0, 500],
    slide: function(event, ui) {
      var x = ui.values[0];
      var y = ui.values[1];
      $('#min').text( ui.values[0] )
      $('#max').text( ui.values[1] )
      $.ajax({
        url: '/search',
        type: 'GET',
        dataType: 'script',
        data: {min:x, max:y,term:food_item_name},
        success: function(repsonse){},
      });
    }
  });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.