CODEWITHSUNDEEP
javascriptjquery
herci
herci

Reputation: 385

How to create a JavaScript range slider with links?

I have a list of numbers like that:

<ul class="term-list">
<li class="term-item"><a href="/search?count=1">1</li>
<li class="term-item"><a href="/search?count=2">2</li>
<li class="term-item"><a href="/search?count=3">3</li>
<li class="term-item"><a href="/search?count=4">4</li>
<li class="term-item"><a href="/search?count=5">5</li>
<li class="term-item"><a href="/search?count=6">6</li>
</ul>

What I want to do is to show this list as a JavaScript (range) slider. As you can see, each number has a link.

What should I do to apply slider to list without losing the link feature? I mean if a number selected on the slider (wait 2 seconds), then go to the link with this number.

Upvotes: 0

Views: 118

Answers (2)

Mamdouh Saeed
Mamdouh Saeed

Reputation: 2324

Here is an example to createElement("a"); and you can set Attributes for the generated link

Note: links available from 0 to 100.

$("#link_generator").on("change", function() {
  //wait 2 seconds
  setTimeout(openURL, 2000);

  //or set attributes

  /* var q = $("#link_generator").val();

  setTimeout(function(){

openURL({
  "href":"/search?count="+q,
  "target":"_blank"
  });

},3000); */

});

function openURL(attr) {
  var q = $("#link_generator").val();

  var a = document.createElement('a');
  if (attr) {
    for (var k in attr) {
      a[k] = attr[k];
    }
    return a.click();
  }
  if (q > 0) a.href = "/search?count=" + q;
  a.click();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='link_generator' type='range'>
<br/>

Upvotes: 1

Nicolas
Nicolas

Reputation: 8650

All you need is a slidestop event, something like that. 

$(document).ready(function(){
    $('.slider').on('slidestop', function(){
        window.location.href = "youpage/count" + $(this).val();
    });
});

For the wait two second before changing the page, use setTimeout(function(){ // code}, 2000);

Hopes it helps !

  • Nic

P.S. I assumed you use Jquery-UI.

Upvotes: 1

Related Questions