Dublin Library

The Publishing Project

Using Sliders in Javascript

  • 2 min. read

 

When doing interactive demos or building preferences panels we may need to create sliders to set values for the associated properties.

This post will cover how to configure an HTML slider and how to read the data from Javascript to change portions of the page.

First we define a range input we'll use to change the width of a target element.

<label for="theWidth">Width: </label>
<input type="range"
  id="theWidth"
  name="theWidth"
  min="10"
  max="100"
  step="10"
  value="50"/>

The Javascript portion of the code does two things. First it captures references to the slider and the target element (element with container class).

  const slider = document.getElementById('theWidth');

  const container = document.querySelector('.container');

Next,we add an input event listener to update the CSS with the current value of the slider.

The event listener updates the value of the width property of the .container element using viewport units.

  slider.addEventListener('input', function () {
    container.style.width = `${slider.value}vw`;
  });

A future iteration may change to customize the units that we use in addition to the value.

Edit on Github