css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Styling an input range slider with pure CSS. JS only to grab the value.


  1. Quick tip, change 'change' by 'input' and the bubble will change as you move the range input

  2. @danielortiz Ah.. thanks... at the time when I was prototyping this, I didn't want that because I thought it was distracting, but I would imagine most people would want to see that. I'll edit the demo per your suggestion. Thank you again...

  3. Maybe a noob question, but how can I have multiple sliders on one page. I tried it, but when sliding one slider the values change of all sliders. Guess there has to be an unique class, but when I change the class of the input and the span (also in the JavaScript), it stops working.

  4. @sanderhof You would just need to modify the js to run in an .each() loop. Here is an example: http://codepen.io/thelifemgmt/pen/0e51944f86fa624858db8b2f681517d1

  5. @thelifemgmt Thanks for the quick response! It worked like a charm. Really like this slider :).

    Second question, would it be possible to change the values for example 0=strongly disagree to 5=strongly agree with a data list? How would I add this to the js?

  6. if you have a bigger range you can add a step value using this form. step="(value)"


    input class="input-range" type="range" value="100" min="100" max="5000" step="100"

  7. Sean, thanks for your amazing work. Made my day! Do you have an Amazon Wishlist?

  8. @coderebels: Haha... thank you. Enjoy!

  9. Not working for IE11. how to do?

  10. @hanmyohtwe Not intended to be a 100%, cross browser solution... just a fun demo. If you need IE, use a polyfill, or jquery UI. Good luck.

  11. Hi :) How would you add a button for Reset a given slider, please ??

  12. Chris @Chris_Scomersi on


    just add a button in the HTML like so:

    <button id='btn'>reset</button>

    and a bit of js

    var btn = document.getElementById('btn'); var input = document.getElementsByClassName('range-slider__range')[0]; var output = document.getElementsByClassName('range-slider__value')[0]; btn.onclick = function(){ input.value='0'; output.innerHTML='0'; }

    this will reset the first slider and it's output/span :) if you want to reset the second one just write index 1 instead index 0 / document.getElementsByClassName('range-slider__range')[1]

    Hope this helps you out :)

  13. Hi! how can add background filling behavior when I move the control?

    I try, but I can't fill only the part according value

    range.on('input', function(){ value.html(this.value); range.css('background-color', 'red', this.value); });

  14. Yei !!

    I get it!

    add this line after last function

    range.change(function() {
      var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
      '-webkit-gradient(linear, left top, right top, ' +
     'color-stop(' + val + ', #6caddf), ' +
    'color-stop(' + val + ', #d7dcdf)' +  ')'
  15. Hey, nice snippet. I wanted to ask for something else additionally.

    For each step, for example 3, how can I display text underneath the range, and display different text on each step?

    does that make sense?

    Thank you.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.