Changing Links in button based on slider value

Question

I have a slider, and the slider outputs a value from 500 to 1600 with a step of 100. I also have a "Go" button, and I would like the link within the Go Button to change based on the value the slider shows. Here is My Code.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}

#slidecontainer {
  width: 50%;
  /* Width of the outside container */
  margin-left: auto !important;
  margin-right: auto !important;
}


/* The slider itself */

.slider {
  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
  width: 100%;
  /* Full-width */
  height: 25px;
  /* Specified height */
  background: #ffffff;
  /* Grey background */
  outline: none;
  /* Remove outline */
  opacity: 0.7;
  /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s;
  /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}


/* Mouse-over effects */

.slider:hover {
  opacity: 1;
  /* Fully shown on mouse-over */
}


/* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

<section id="banner">
  <header>
    <h2>Choose Budget</h2>
  </header>
  <div id="slidecontainer">
    <input type="range" min="500" max="2500" value="500" step="100" class="slider" id="myRange">
  </div>


  <ul class="Slider">
    <li>
      <p>Price Point: $<span id="demo"></span></p>
    </li>
    <br>
    <a href="#" class="button style3">Go</a>
    <br>
  </ul>

</section>

Now, I already am outputting a value, "demo". I now want each value, to correlate to a link, and that link be placed within the "go" button. Thank you for reading. (also, I am very very new to javascript, so please try to explain it as if I am 4 years old.

Answer 1

As you’ve said, you’re already outputting the value this.value in output.innerHTML. Similarly, you can find your link and change its href.

There are two ways of finding your link (among others):

• Either use document.querySelector("a.button.style3") or a similar selector,
• or give that link an ID (e.g. <a id="goButton" href="#" class="button style3">Go</a>), then use document.getElementById("goButton").

Then, to change its href, you could

• Set its href attribute: document.getElementById("goButton").setAttribute("href", this.value + ".html"),
• or its href property: `document.getElementById("goButton").href = this.value + ".html".

---

The full code could look like this:

slider.oninput = function() {
  document.getElementById("goButton").href = this.value + ".html";
}

The resulting URL will look like this: https://yoursite.com/500.html for a price of $500.

Answer 2

You may do exactly like you change the value of demo but you change the attribute href instead of the html content.

Let's assume you have a link for each value you may try using if else like this :

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var link = document.getElementById("link");
output.innerHTML = slider.value; // Display the default slider value



// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
  if(this.value==500)
    link.setAttribute('href','link1');
  else if(this.value==600)
    link.setAttribute('href','link2');
  else
    link.setAttribute('href','link3');
  /* you do the same for the other values */
}

<section id="banner">
  <header>
    <h2>Choose Budget</h2>
  </header>
  <div id="slidecontainer">
    <input type="range" min="500" max="2500" value="500" step="100" class="slider" id="myRange">
  </div>


  <ul class="Slider">
    <li>
      <p>Price Point: $<span id="demo"></span></p>
    </li>
    <br>
    <a href="#" class="button style3" id="link">Go</a>
    <br>
  </ul>

</section>

or you may consider using an object where you store all links like this

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var link = document.getElementById("link");
output.innerHTML = slider.value; // Display the default slider value

const links = {500: "link1", 600: "link3",700: "link4",800: "link2"};

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
  link.setAttribute('href',links[this.value]);
}

<section id="banner">
  <header>
    <h2>Choose Budget</h2>
  </header>
  <div id="slidecontainer">
    <input type="range" min="500" max="2500" value="500" step="100" class="slider" id="myRange">
  </div>


  <ul class="Slider">
    <li>
      <p>Price Point: $<span id="demo"></span></p>
    </li>
    <br>
    <a href="#" class="button style3" id="link">Go</a>
    <br>
  </ul>

</section>

Answer 3

There are two possibilities: 1) change the links href dynamically. For that the link needs to have an id:

<a href = "http://example.com/500.html" id="go" > GO </a>

So now we can get that link inside js:

const go = document.getElementById("go");

And whenever the input changes, we not only update the output but also the link:

slider.oninput = function() {
  output.innerHTML = this.value;
  go.href = `http://example.com/${this.value}.html`;
}

2) get the sliders value when the linked is clicked. For that, the link does not need to be a link, but can rather be a button:

<button id = "go" > GO </button>

So when thats clicked, lets redirect to the url containing the sliders value:

document.getElementById("go")
  .onclick = e => 
     location.href = `http://example.com/${slider.value}.html`;

Things you might want to lookup that ive used :

const : a cool and new version of var

${...} : a template literal, basically a way to embed code into strings

=> : thats an arrow function ( they work exactly like function however i think theyre more readable)