Search code examples
jqueryjquery-uisliderjquery-ui-slider

jQuery send ui.value from 2 sliders to a href


I have one slider and when I drag it, it will send value to specific a href

$(function() {
  $('.slider-a').slider({
    value: 50,
    min: 3,
    max: 100,
    step: 1,
    slide: function(event, ui){
      $('.dl-link').attr('href', '/download/' + ui.value + '/');
    }
  });
});

when i drag the slider to 60:

<a href="/download/60/">link</a>

this works great when i have one slider, but how can i send values of 2 sliders?

second slider:

$(function() {
  $('.slider-b').slider({
    value: 80,
    min: 1,
    max: 99,
    step: 1,
    slide: function(event, ui){
      $('.dl-link').attr('href', '/download/' + ui.value FROM FIRST SLIDER + '/' + ui.value + '/');
    }
  });
});

the final link should look like:

<a href="/download/60/55/">link</a>

thanks


Solution

  • Try this. I simply save the ui.value values then construct the URLs from the saved values.

    var firstslider = 50;
    var secondslider = 80;
    $(function() {
      $('.slider-a').slider({
        value: 50,
        min: 3,
        max: 100,
        step: 1,
        slide: function(event, ui){
          firstslider = ui.value;
          $('.dl-link').attr('href', '/download/' + firstslider + '/' + secondslider + '/');
        }
      });
    });
    $(function() {
      $('.slider-b').slider({
        value: 80,
        min: 1,
        max: 99,
        step: 1,
        slide: function(event, ui){
          secondslider = ui.value;
          $('.dl-link').attr('href', '/download/' + firstslider + '/' + secondslider + '/');
        }
      });
    });