jQuery Multiple Slider action

Question

I have 3 jQuery sliders on the same page:-

jQuery('.slider-deposit').slider({
    range: "max",
    min: 3800,
    max: 30000,
    value: 3848,
    step: 500,
    slide: function(event, ui) {            
        jQuery(".calc-deposit").html('£'+ui.value);
});

jQuery('.slider-loan').slider({
    range: "max",
    min: 15400,
    max: 120000,
    value: 15393,
    step: 2000,
    slide: function(event, ui) {
        jQuery(".calc-loan").html('£'+ui.value);
    }
});

jQuery('.slider-mortgage').slider({
    range: "max",
    min: 57000,
    max: 450000,
    value: 57724,
    step: 7500,
    slide: function(event, ui) {
        jQuery(".calc-mortgage").html('£'+ui.value);
    }
});

On change on ANY of the sliders I want to update a value on the page, how can this be achieved?

I did try:-

jQuery('.slider').slider({
    slide: function(event, ui) {            
        alert('test');
    }
});

But this doesn't work.

score 2 · Accepted Answer · answered Jan 20 '16 at 14:39

You can DRY up your code by using data attributes on the HTML element you instantiate the slider on. This will then allow you to run the same code on the slide event of all three. Try this:

<div class="slider" data-min="3800" data-max="30000" data-value="3848" data-step="500" data-target=".calc-deposit"></div>
<div class="slider" data-min="15400" data-max="120000" data-value="15393" data-step="2000" data-target=".calc-loan"></div> 
<div class="slider" data-min="57000" data-max="450000" data-value="57724" data-step="7500" data-target=".calc-mortgage"></div>

$('.slider').each(function() {
    var $el = $(this);
    $el.slider({
        range: "max",
        min: $el.data('min'),
        max: $el.data('max'),
        value: $el.data('value'),
        step: $el.data('step'),
        slide: function(event, ui) {
            $($el.data('target')).html('£' + ui.value);

            // place code here which will execute when *any* slider moves
        }
    });
});

Example fiddle

score 1 · Answer 2 · answered Jan 20 '16 at 14:39

The API gives an event:-

$( ".selector" ).on( "slide", function( event, ui ) { } );

so if all sliders have the class slider, then bind that after you initialize them:-

jQuery('.slider').on( "slide", function( event, ui ){          
    alert('test');
});

jQuery Multiple Slider action

2 Answers2