CODEWITHSUNDEEP
jqueryjquery-uisliderjquery-ui-slider
avatarium
avatarium

Reputation: 5

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

Upvotes: 0

Views: 86

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241168

You can retrieve the value of a slider using $(selector).slider('option', 'value').

Therefore your slide callback for the second slider could be:

Example Here

slide: function(event, ui) {
  var sliderAValue = $('.slider-a').slider('option', 'value');
  $('.dl-link').attr('href', '/download/' + sliderAValue + '/' + ui.value + '/');
}

Upvotes: 1

MyUser
MyUser

Reputation: 321

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

Upvotes: 1

Related Questions