Rectangle 27 15

The range option defined in the jquery ui slider documentation does indeed limit the slider to only 2 handles. You need to create several elements when the slider raises the 'slide' or 'change' event and set the position of these manually, this way you can create a slider with multiple handles and multiple ranges which you can apply custom css to. See fiddle for a working example.

This is awesome - thank you. I think there is a small bug where it should be position() and not offset() in the doUpdate() method. jsfiddle.net/AV3G3/60 Otherwise the slider goes all crazy wide buried inside a real app

javascript - jQuery UI Slider: Range with 3 handles, and configurable ...

javascript jquery jquery-ui
Rectangle 27 8

#demo-frame > div.demo { 
    padding: 10px !important; 
    float: left;
}
.contentContainer {
    float: left;
    width: 400px;
    height: 500px;
    overflow: hidden;
}
.ui-slider-vertical .ui-state-default { 
    border: none; 
    width: 28px; 
    height: 82px; 
    background: transparent url(volume_bar/shattle.png) no-repeat 0 0;
}
.ui-slider-vertical .ui-slider-handle {
    left: 0;
    margin-bottom: -41px;
    margin-left: 0;
}
.ui-slider-range, .ui-widget-header, .ui-slider-range-min {
    background: none;
}
#slider-vertical, .ui-slider {
    border: none;
    width: 50px;
    height: 50px;
    background: transparent url(volume_bar/track-bg.png) repeat-y 0 0;
}

someone asked in the comment section for sample css code so here's the one I used to change the handle and scrollbar background image to my own custom png image files. Make sure to insert the css AFTER the jquery ui css in the header section.

jquery - Changing Slider handle image - Stack Overflow

jquery jquery-ui
Rectangle 27 8

#demo-frame > div.demo { 
    padding: 10px !important; 
    float: left;
}
.contentContainer {
    float: left;
    width: 400px;
    height: 500px;
    overflow: hidden;
}
.ui-slider-vertical .ui-state-default { 
    border: none; 
    width: 28px; 
    height: 82px; 
    background: transparent url(volume_bar/shattle.png) no-repeat 0 0;
}
.ui-slider-vertical .ui-slider-handle {
    left: 0;
    margin-bottom: -41px;
    margin-left: 0;
}
.ui-slider-range, .ui-widget-header, .ui-slider-range-min {
    background: none;
}
#slider-vertical, .ui-slider {
    border: none;
    width: 50px;
    height: 50px;
    background: transparent url(volume_bar/track-bg.png) repeat-y 0 0;
}

someone asked in the comment section for sample css code so here's the one I used to change the handle and scrollbar background image to my own custom png image files. Make sure to insert the css AFTER the jquery ui css in the header section.

jquery - Changing Slider handle image - Stack Overflow

jquery jquery-ui
Rectangle 27 10

function setSliderTicks(){
    var $slider =  $('#slider');
    var max =  $slider.slider("option", "max");    
    var spacing =  100 / (max -1);

    $slider.find('.ui-slider-tick-mark').remove();
    for (var i = 0; i < max ; i++) {
        $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
     }
}
.ui-slider-tick-mark{
    display:inline-block;
    width:2px;
    background:black;
    height:16px;
    position:absolute;
    top:-4px;
}

.ui-slider-tick-mark { display: inline-block; width: 2px; background: #fcf8e3; height: 28px; position: absolute; top: 0px; } If you want the styles to appear at the bottom. This is a mod of your code. Thanks.

css - Add tick marks to jQuery slider? - Stack Overflow

jquery css jquery-ui slider
Rectangle 27 10

function setSliderTicks(){
    var $slider =  $('#slider');
    var max =  $slider.slider("option", "max");    
    var spacing =  100 / (max -1);

    $slider.find('.ui-slider-tick-mark').remove();
    for (var i = 0; i < max ; i++) {
        $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
     }
}
.ui-slider-tick-mark{
    display:inline-block;
    width:2px;
    background:black;
    height:16px;
    position:absolute;
    top:-4px;
}

.ui-slider-tick-mark { display: inline-block; width: 2px; background: #fcf8e3; height: 28px; position: absolute; top: 0px; } If you want the styles to appear at the bottom. This is a mod of your code. Thanks.

css - Add tick marks to jQuery slider? - Stack Overflow

jquery css jquery-ui slider
Rectangle 27 9

@Matt Brennan I really like this but I need one without any gaps... And the first range would need to be fixed, possible to do? Thanks!

@tim, not with Elessar currently I'm afraid. Fixed ranges is on the roadmap but removing the gaps would be tricky with our current design.

The compatibility table at github is pretty old. At least for IE11 and Chrome 44 I can say, it works without a problem.

That's generated by testling-ci, which sadly has been totally broken since June 2014. I've an outstanding issue to move to Zuul and Saucelabs, I just haven't had the time or inclination to do it.

Jquery slider plugin that supports "Multiple Ranged Handles" - Stack O...

jquery jquery-ui slider
Rectangle 27 9

@Matt Brennan I really like this but I need one without any gaps... And the first range would need to be fixed, possible to do? Thanks!

@tim, not with Elessar currently I'm afraid. Fixed ranges is on the roadmap but removing the gaps would be tricky with our current design.

The compatibility table at github is pretty old. At least for IE11 and Chrome 44 I can say, it works without a problem.

That's generated by testling-ci, which sadly has been totally broken since June 2014. I've an outstanding issue to move to Zuul and Saucelabs, I just haven't had the time or inclination to do it.

Jquery slider plugin that supports "Multiple Ranged Handles" - Stack O...

jquery jquery-ui slider
Rectangle 27 9

Thanks Arie Livshin and CodeToad. The previous code assume that the min value is always 1. I edited the code to work with min values too.

$("#users-slider").slider(
  {
    range: "min",
    value: 3,
    min: 3,
    max: 6,
    create: function( event, ui ) {
      setSliderTicks(event.target);
    },
  }
);

function setSliderTicks(el) {
    var $slider =  $(el);
    var max =  $slider.slider("option", "max");    
    var min =  $slider.slider("option", "min");    
    var spacing =  100 / (max - min);

    $slider.find('.ui-slider-tick-mark').remove();
    for (var i = 0; i < max-min ; i++) {
        $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
     }
}

css - Add tick marks to jQuery slider? - Stack Overflow

jquery css jquery-ui slider
Rectangle 27 9

Thanks Arie Livshin and CodeToad. The previous code assume that the min value is always 1. I edited the code to work with min values too.

$("#users-slider").slider(
  {
    range: "min",
    value: 3,
    min: 3,
    max: 6,
    create: function( event, ui ) {
      setSliderTicks(event.target);
    },
  }
);

function setSliderTicks(el) {
    var $slider =  $(el);
    var max =  $slider.slider("option", "max");    
    var min =  $slider.slider("option", "min");    
    var spacing =  100 / (max - min);

    $slider.find('.ui-slider-tick-mark').remove();
    for (var i = 0; i < max-min ; i++) {
        $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
     }
}

css - Add tick marks to jQuery slider? - Stack Overflow

jquery css jquery-ui slider
Rectangle 27 32

for custom sizes, you may use another array for your labels:

var sizes = ["0","2","4","6","8","10","12","14","16","18","16W","18W","20W"];
$("#slider-size .slider").slider({
  min: 0,
  max: sizes.length - 1,
  step: 1,
  slide: function(event, ui) {
    $(".rsize").text(sizes[ui.value]);
  }
});

Now, to add or remove sizes, just modify the sizes array.

Custom Range/Variable Set with jQuery UI Slider - Stack Overflow

jquery jquery-ui slider uislider
Rectangle 27 48

The CSS class that can be changed to add a image to the JQuery slider handle is called ".ui-slider-horizontal .ui-slider-handle".

The following code shows a demo:

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
  .ui-slider-horizontal .ui-state-default {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;}
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider();
  });
  </script>
</head>
<body>
<div id="slider"></div>
</body>
</html>

I think registering a handle option was the old way of doing it and no longer supported in JQuery-ui 1.7.2?

wow.. i was also facing same problem and that got resolved from your solution.. thanks buddy

I copied & pasted this exact code in DW and tried it. I replaced the image with my own. Not the slider nor the image display at all. I've tried every solution listed concerning this topic and nothing has worked to change the images. I'll post my code under my own thread and if there is a working solution on SO, hopefully someone can list the URL on SO.

The link to the png is broken.

How to change Jquery UI Slider handle - Stack Overflow

jquery jquery-ui jquery-plugins slider
Rectangle 27 48

The CSS class that can be changed to add a image to the JQuery slider handle is called ".ui-slider-horizontal .ui-slider-handle".

The following code shows a demo:

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
  .ui-slider-horizontal .ui-state-default {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;}
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider();
  });
  </script>
</head>
<body>
<div id="slider"></div>
</body>
</html>

I think registering a handle option was the old way of doing it and no longer supported in JQuery-ui 1.7.2?

wow.. i was also facing same problem and that got resolved from your solution.. thanks buddy

I copied & pasted this exact code in DW and tried it. I replaced the image with my own. Not the slider nor the image display at all. I've tried every solution listed concerning this topic and nothing has worked to change the images. I'll post my code under my own thread and if there is a working solution on SO, hopefully someone can list the URL on SO.

The link to the png is broken.

How to change Jquery UI Slider handle - Stack Overflow

jquery jquery-ui jquery-plugins slider
Rectangle 27 2

One part of @gaurav solution worked for jQuery 2.1.3 and JQuery UI 1.10.2 with multiple sliders. My project is using four range sliders to filter data with this filter.js plugin. Other solutions were resetting the slider handles back to their starting end points just fine, but apparently they were not firing an event that filter.js understood. So here's how I looped through the sliders:

$("yourSliderSelection").each (function () {
    var hs = $(this); 
    var options = $(this).slider('option');

    //reset the ui
    $(this).slider( 'values', [ options.min, options.max ] ); 

    //refresh/trigger event so that filter.js can reset handling the data
    hs.slider('option', 'slide').call(
        hs, 
        null, 
        {
            handle: $('.ui-slider-handle', hs),
            values: [options.min, options.max]
        }
    );

});

The hs.slider() code resets the data, but not the UI in my scenario. Hope this helps others.

jQuery UI Slider (setting programmatically) - Stack Overflow

jquery jquery-ui
Rectangle 27 9

You can just attach a tooltip-like div that you can append to the handle so it moves along with it. You just have to position it with CSS, like so:

var initialValue = 2012; // initial slider value
var sliderTooltip = function(event, ui) {
    var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start)
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';

    $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
}

$("#slider").slider({
    value: initialValue,
    min: 1955,
    max: 2015,
    step: 1,
    create: sliderTooltip,
    slide: sliderTooltip
});
.tooltip {
    position: absolute;
    z-index: 1020;
    display: block;
    padding: 5px;
    font-size: 11px;
    visibility: visible;
    margin-top: -2px;
    bottom:120%;
    margin-left: -2em;
}

.tooltip .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid #000000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    width: 0;
    height: 0;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

jquery slider with value above it which travels with the slider - Stac...

jquery jquery-ui slider uislider jquery-ui-slider
Rectangle 27 9

You can just attach a tooltip-like div that you can append to the handle so it moves along with it. You just have to position it with CSS, like so:

var initialValue = 2012; // initial slider value
var sliderTooltip = function(event, ui) {
    var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start)
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';

    $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
}

$("#slider").slider({
    value: initialValue,
    min: 1955,
    max: 2015,
    step: 1,
    create: sliderTooltip,
    slide: sliderTooltip
});
.tooltip {
    position: absolute;
    z-index: 1020;
    display: block;
    padding: 5px;
    font-size: 11px;
    visibility: visible;
    margin-top: -2px;
    bottom:120%;
    margin-left: -2em;
}

.tooltip .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid #000000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    width: 0;
    height: 0;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

jquery slider with value above it which travels with the slider - Stac...

jquery jquery-ui slider uislider jquery-ui-slider
Rectangle 27 15

Actually using the title attribute is the easier way ( belugabob idea)

$(function() {


  $("#slider").slider()
                .find(".ui-slider-handle")
                .attr("title", "Slide Me")

});
$(function() {

  var $slideMe = $("<div/>")
                    .css({ position : 'absolute' , top : 10, left : 0 })
                    .text("Slide Me!")
                    .hide()


  $("#slider").slider()
                .find(".ui-slider-handle")
                .append($slideMe)
                .hover(function()
                        { $slideMe.show()}, 
                       function()
                        { $slideMe.hide()}
                )

});

While I like your solution, I'm not convinced that the tooltip should be visible for the entire duration of the sliding action. By using a native browser tooltip, it will only appear for short while after the mouse enter the slider handle. All a matter of taste, I suppose.

Guess you are right - it also simplifies the code ;)

my goal was to integrate some sort of nice css tooltip. Is this possible? Or only using the title attribute?

tooltip to follow jquery slider handle? - Stack Overflow

jquery
Rectangle 27 15

Actually using the title attribute is the easier way ( belugabob idea)

$(function() {


  $("#slider").slider()
                .find(".ui-slider-handle")
                .attr("title", "Slide Me")

});
$(function() {

  var $slideMe = $("<div/>")
                    .css({ position : 'absolute' , top : 10, left : 0 })
                    .text("Slide Me!")
                    .hide()


  $("#slider").slider()
                .find(".ui-slider-handle")
                .append($slideMe)
                .hover(function()
                        { $slideMe.show()}, 
                       function()
                        { $slideMe.hide()}
                )

});

While I like your solution, I'm not convinced that the tooltip should be visible for the entire duration of the sliding action. By using a native browser tooltip, it will only appear for short while after the mouse enter the slider handle. All a matter of taste, I suppose.

Guess you are right - it also simplifies the code ;)

my goal was to integrate some sort of nice css tooltip. Is this possible? Or only using the title attribute?

tooltip to follow jquery slider handle? - Stack Overflow

jquery
Rectangle 27 20

Yeah. No doubt, its a good solution. But i found some errors in windows 8 touch screen PC and in IE-11 browsers. Please share if you have any workaround. Anyway, thanks for this answer.

Doesn't work for me. I am testing in android phones and it still not working

Jquery slider range doesn't work on iPad - Stack Overflow

jquery slider touch range device
Rectangle 27 4

Alternatively you can also use this slider

Interesting...it's the first time I've seen the "Glow" library.

BBC.co.uk style jquery slider - Stack Overflow

jquery jquery-plugins jquery-slider
Rectangle 27 10

minRangeSize
maxRangeSize
  • autoShift - when set to true it automatically drags the other handle along when range width reaches maximum; when set to false handle just can't be moved beyond maximum range width
  • lowMax - sets the lower handle upper boundary so it's impossible to set lower handle beyond this value
  • topMin - sets the upper handle lower boundary so it's impossible to set upper handle below this value

This is a working example of such range slider.

This is the extra code that has to be run after jQuery slider. It actually rewrites one of its internal functions to also check the new settings. This code will only change slider code when slider script has been loaded (hence the first if statement that checks whether slider widget has been loaded):

(function ($) {
    if ($.ui.slider)
    {
        // add minimum range length option
        $.extend($.ui.slider.prototype.options, {
            minRangeSize: 0,
            maxRangeSize: 100,
            autoShift: false,
            lowMax: 100,
            topMin: 0
        });

        $.extend($.ui.slider.prototype, {
            _slide: function (event, index, newVal) {
                var otherVal,
                newValues,
                allowed,
                factor;

                if (this.options.values && this.options.values.length)
                {
                    otherVal = this.values(index ? 0 : 1);
                    factor = index === 0 ? 1 : -1;

                    if (this.options.values.length === 2 && this.options.range === true)
                    {
                        // lower bound max
                        if (index === 0 && newVal > this.options.lowMax)
                        {
                            newVal = this.options.lowMax;
                        }
                        // upper bound min
                        if (index === 1 && newVal < this.options.topMin)
                        {
                            newVal = this.options.topMin;
                        }
                        // minimum range requirements
                        if ((otherVal - newVal) * factor < this.options.minRangeSize)
                        {
                            newVal = otherVal - this.options.minRangeSize * factor;
                        }
                        // maximum range requirements
                        if ((otherVal - newVal) * factor > this.options.maxRangeSize)
                        {
                            if (this.options.autoShift === true)
                            {
                                otherVal = newVal + this.options.maxRangeSize * factor;
                            }
                            else
                            {
                                newVal = otherVal - this.options.maxRangeSize * factor;
                            }
                        }
                    }

                    if (newVal !== this.values(index))
                    {
                        newValues = this.values();
                        newValues[index] = newVal;
                        newValues[index ? 0 : 1] = otherVal;
                        // A slide can be canceled by returning false from the slide callback
                        allowed = this._trigger("slide", event, {
                            handle: this.handles[index],
                            value: newVal,
                            values: newValues
                        });
                        if (allowed !== false)
                        {
                            this.values(index, newVal, true);
                            this.values((index + 1) % 2, otherVal, true);
                        }
                    }
                } else
                {
                    if (newVal !== this.value())
                    {
                        // A slide can be canceled by returning false from the slide callback
                        allowed = this._trigger("slide", event, {
                            handle: this.handles[index],
                            value: newVal
                        });
                        if (allowed !== false)
                        {
                            this.value(newVal);
                        }
                    }
                }
            }
        });
    }
})(jQuery);

This is simple AWESOME! Do you have this on GitHub?

@PedroPeixoto: not yet, but it's been in the plan for a long time. All I did so far was to write a blog post with all the necessary code. Feel free to check it out.

Set min/max for each range handle in jQuery UI slider? - Stack Overflo...

jquery-ui range max minimum jquery-ui-slider