How to get value from jQuery UI slider?

Question

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?

score 80 · Answer 1 · answered Jun 14 '12 at 11:20

80

To read slider value/percentage value at anytime:

var val = $('#slider').slider("option", "value");

answered Jun 14 '12 at 11:20

chad.mellor

940
7
5

score 29 · Answer 2 · answered May 30 '10 at 19:17

29

$('#slider').slider({
    change: function(event, ui) { 
        alert(ui.value); 
    } 
});

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

answered May 30 '10 at 19:17

Ben

16,275
9
45
63

@atinder - Please edit your question and provide the code you're using. – Ben May 31 '10 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 '12 at 16:44

score 25 · Answer 3 · answered Feb 23 '17 at 04:21

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

score 16 · Answer 4 · answered Nov 09 '12 at 13:17

16

var val = $("#slider").slider("value");

answered Nov 09 '12 at 13:17

wal

17,409
8
74
109

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](http://api.jqueryui.com/slider/#option-value) – sampoh Sep 02 '13 at 09:28
Man, why they change it to something so complicated. – NoName Nov 04 '20 at 17:58

Hitesh · Answer 5 · 2013-10-28T18:51:56.367

$("#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);

}

score 1 · Answer 6 · edited Dec 23 '16 at 13:10

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

edited Dec 23 '16 at 13:10

Grundy

13,356
3
35
55

answered Dec 23 '16 at 12:18

shahbaj khan

11
3

score 1 · Answer 7 · edited Dec 21 '18 at 01:09

  // 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] )     } );




})

score 0 · Answer 8 · answered Aug 29 '13 at 14:16

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);
        }
    });
});

answered Aug 29 '13 at 14:16

Israel Margulies

8,656
2
30
26

score 0 · Answer 9 · answered Oct 22 '15 at 14:27

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="">

This same solution was posted years ago http://stackoverflow.com/a/13308838/2333214 — T J, May 20 '16 at 08:50

score 0 · Answer 10 · edited Jun 09 '19 at 20:46

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){},
      });
    }
  });
});

How to get value from jQuery UI slider?

10 Answers10

Linked

Related