Html5 input type range show range value

Helping hands: dynamic updates

Dynamic updates with modern browsers

To bless users with dynamic updates in real time (especially on webkit-based browsers), use the oninput event:

<input type="range" id="rangeInput" min="0" max="100" value="50" oninput="document.getElementById('textValue').value = this.value">
<input type="text" id="textValue" value="50">


Note: Make sure your Superhero cape is on—it flies in all modern browsers.

Accessibility to the rescue!

Consider accessibility using the <label> element that aids screen readers:

<label for="rangeInput">Volume control:</label>
<input type="range" id="rangeInput" min="0" max="100" value="50" oninput="document.getElementById('textValue').value = this.value">
<!-- Output field described above -->
<input type="text" id="textValue" value="50" aria-live="polite">


Editable number—a new sidekick

Switch the output to an <input type="number"> allowing users to tweak the value, reflecting on the slider:

<input type="range" id="rangeInput" min="0" max="100" value="50" oninput="numberValue.value = this.value">
<input type="number" id="numberValue" value="50" oninput="rangeInput.value = this.value">


Note: With great power comes great responsibility—handle user inputs wisely!

Stylish, posh & responsive: Best of both worlds

Styling with the secret sauce

Brush it up with inline styles for a chic brand recall:

<input type="range" style="height:25px; background:#ddd;" oninput="valueDisplay.textContent=this.value">
<span id="valueDisplay">50</span>


Perfection is key

Take your presentation game up a notch with calculated positioning that mirrors the slider's thumb:

#rangeValue {
  position: absolute;
  bottom: -25px;
  left: 50%; /* Should be computed from value and range width */
}


Responsive is the new black

Ensure your range input fits all screens gracefully. Responsive design + CSS media queries = Magic:

@media screen and (max-width: 600px) {
  #rangeSlider {
    width: 100%;
  }
}

@media screen and (min-width: 601px) {
  #rangeSlider {
    width: 300px;
  }
}


Advanced tools and tricks up your sleeve

Keyboard aces

Enable keyboard input for range slider for even more accessibility. Modern browsers have you covered when the slider is focused:

<input type="range" tabindex="0"> <!-- Sly arrows in action once focused -->


Note: Arrows are shy. They only appear when focused!

Keepin' it real without jQuery

Real-time updates without jQuery. JavaScript is more than enough:

<input type="range" id="rangeInput" min="0" max="100" value="50" oninput="document.getElementById('textValue').value = this.value">
<input type="text" id="textValue" value="50">


Note: Who needs a map when you have Vanilla JS?

Units for the win

Add units to the numbers for better user comprehension. It's like giving your numbers a fancy hat:

<input type="range" oninput="updateValueWithUnit(this.value)">


function updateValueWithUnit(value){
  document.getElementById('valueDisplay').textContent = value + " units"; // Boom! Fancy hat.
}


Note: Fancy hats increase comprehensibility by 200%. It's a fact. Don't ask for a source.