search

andreruffert / rangeslider.js

🎚 HTML5 input range slider element jQuery polyfill
https://rangeslider.js.org
MIT License
2.16k stars 401 forks source link

Link to url #143

Closed rossweston closed 9 years ago

rossweston commented 9 years ago

Hi Andre,

Hope all is well.

I was wondering if you could help me edit your range slider. http://andreruffert.github.io/rangeslider.js/

What I would like it to do is go to specific url depending on where in slider you select.

For example if the range was 1-5 and you moved the slider to 3 you would go to a specific url…

Is that possible with your slider?

And if so, how could I embed that into a wordpress page for example?

Many thanks.

andreruffert commented 9 years ago

@rossweston of course! But I would say it has not much todo with the plugin itself :smile: Anyway, you could simply listen to normal change/input events and react to it e.g:

<input type="range" min="1" max="5" step="1">
var urls = [
    'url1',
    'url2',
    'url3',
    'url4',
    'urls5'
];

$(document).on('change', 'input[type="range"]', function(e) {
    window.location = urls[e.target.value - 1];
});
rossweston commented 9 years ago

Okay cheers thats good. Forgive me for being a touch thick on this one, but if I was to embed this javascript into a wordpress page, how would I go about doing that please?

andreruffert commented 9 years ago

So I'm not really into wp. I guess it depends... but you should be able to write a JS file and simply include it. Maybe this will help you.

rossweston commented 9 years ago

Not to worry, its weak area for me integrating the two, putting WP aside, if you were to place into a normal html website what methodology would you use please?