1. Overview

Challenge & starter files: Advent of JS

Full codes: nilstarbb/advent-of-js/6-range-slider

Live Demo: 06 - Range Slider || Advent of JavaScript

Preview:

range-slider.gif

2. Details

Users should be able to:

  • Move the knob on the range and the dollar amount above it will update.

3. Coding

This is an easy one. Just pay attention to the difference between oninput and onchange (Read more: onchange vs. oninput for Range Sliders).

const slider = document.getElementById("priceRange");
const price = document.getElementsByClassName("dollars")[0];

const updatePrice = () => {
  price.innerHTML = (slider.value / 100).toFixed(2);
};

slider.oninput = updatePrice;