Question

Please any one can help me with jquery Slider range?
I am new to jQuery and trying to achieve min (right arrow icon) and max(left arrow icon) in the dragging left/right range.

Price range: 0 – 1000
==(>)========(<)===

I want to replace these icons with my personal images with right and left arrow. Is it possible?

I have also attached the image.

$(function() {
    var values = [0,25,50,100,200,400,700,1000];
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 1000,
        step:50,
        orientation: "horizontal",
        values: [ 0,1000 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
            console.log("From: "+ui.values[0],"To: "+ui.values[1]);
            $( "#min" ).val( ui.values[ 0 ] );
    $( "#max" ).val( ui.values[ 1 ] );
        }
    });
    $( "#amount" )
    .val( "£" + $( "#slider-range" )
    .slider( "values", 0 ) + " - £" + $( "#slider-range" )
    .slider( "values", 1 ));
});
$( "#slider-range a").hide();

Answer 1

After having a quick look at the mark-up, it appears that jQuery-UI doesn’t differentiate between the 2 sliders. That isn’t a huge problem; what I would recommend doing, upon constructing your slider is adding a min-value and max-value to the ui-slider-handles accordingly. Something like this should do the trick:

$('#slider-range').slider({
     range: true,
     min: 0,
     max: 1000,
     step:50,
     orientation: "horizontal",
     values: [ 0,1000 ],
     slide: function(event, ui) {
          $('#amount').val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
          $('#min').val( ui.values[ 0 ] );
          $('#max').val( ui.values[ 1 ] );
     }
}).find('.ui-slider-handle')
     .eq(0).addClass('min-slider').end()
     .eq(1).addClass('max-slider');

With these classes in place, you can then setup the CSS to target them and manipulate how they look as you wish. 🙂