How to customize the HTML5 input range type looks using CSS?

Multi tool use
Multi tool use












48















I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working.



Can any one direct me how to customize it??










share|improve this question

























  • With a combination of javascript? Through CSS, you could have the input not displayed and render wathever's suited :before and :after the element. Then through javascript handle how all that interract with each other.

    – Serge
    Mar 28 '14 at 11:17











  • Here is an excellent article on this subject: hongkiat.com/blog/html5-range-slider-style.

    – Annie
    Dec 7 '14 at 14:30






  • 2





    It would be helpful if you'd unaccept the currently accepted answer (and perhaps accept another one that you like). Having an answer saying "don't even try this, the technology is too new" from 5 years ago still pinned to the top of the answer list helps nobody.

    – Mark Amery
    Feb 28 '16 at 16:48











  • This is a little old but still pops up in the search engines so - here is a good example of implementation and x-browser brennaobrien.com/blog/2014/05/… . Nothing wrong with the accepted answer, its just a bit out of date.

    – Pete - iCalculator
    Mar 7 '17 at 13:36











  • Is there a javascript-based way to do this programmatically? I'm interested in dynamically modifying the attributes of the thumb element.

    – hrabinowitz
    May 4 '18 at 21:26
















48















I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working.



Can any one direct me how to customize it??










share|improve this question

























  • With a combination of javascript? Through CSS, you could have the input not displayed and render wathever's suited :before and :after the element. Then through javascript handle how all that interract with each other.

    – Serge
    Mar 28 '14 at 11:17











  • Here is an excellent article on this subject: hongkiat.com/blog/html5-range-slider-style.

    – Annie
    Dec 7 '14 at 14:30






  • 2





    It would be helpful if you'd unaccept the currently accepted answer (and perhaps accept another one that you like). Having an answer saying "don't even try this, the technology is too new" from 5 years ago still pinned to the top of the answer list helps nobody.

    – Mark Amery
    Feb 28 '16 at 16:48











  • This is a little old but still pops up in the search engines so - here is a good example of implementation and x-browser brennaobrien.com/blog/2014/05/… . Nothing wrong with the accepted answer, its just a bit out of date.

    – Pete - iCalculator
    Mar 7 '17 at 13:36











  • Is there a javascript-based way to do this programmatically? I'm interested in dynamically modifying the attributes of the thumb element.

    – hrabinowitz
    May 4 '18 at 21:26














48












48








48


15






I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working.



Can any one direct me how to customize it??










share|improve this question
















I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working.



Can any one direct me how to customize it??







css html5 progress-bar input-type-range






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 21 at 21:16









Marco Demaio

19.6k31110146




19.6k31110146










asked Aug 24 '10 at 11:58









ptamzzptamzz

4,0342578129




4,0342578129













  • With a combination of javascript? Through CSS, you could have the input not displayed and render wathever's suited :before and :after the element. Then through javascript handle how all that interract with each other.

    – Serge
    Mar 28 '14 at 11:17











  • Here is an excellent article on this subject: hongkiat.com/blog/html5-range-slider-style.

    – Annie
    Dec 7 '14 at 14:30






  • 2





    It would be helpful if you'd unaccept the currently accepted answer (and perhaps accept another one that you like). Having an answer saying "don't even try this, the technology is too new" from 5 years ago still pinned to the top of the answer list helps nobody.

    – Mark Amery
    Feb 28 '16 at 16:48











  • This is a little old but still pops up in the search engines so - here is a good example of implementation and x-browser brennaobrien.com/blog/2014/05/… . Nothing wrong with the accepted answer, its just a bit out of date.

    – Pete - iCalculator
    Mar 7 '17 at 13:36











  • Is there a javascript-based way to do this programmatically? I'm interested in dynamically modifying the attributes of the thumb element.

    – hrabinowitz
    May 4 '18 at 21:26



















  • With a combination of javascript? Through CSS, you could have the input not displayed and render wathever's suited :before and :after the element. Then through javascript handle how all that interract with each other.

    – Serge
    Mar 28 '14 at 11:17











  • Here is an excellent article on this subject: hongkiat.com/blog/html5-range-slider-style.

    – Annie
    Dec 7 '14 at 14:30






  • 2





    It would be helpful if you'd unaccept the currently accepted answer (and perhaps accept another one that you like). Having an answer saying "don't even try this, the technology is too new" from 5 years ago still pinned to the top of the answer list helps nobody.

    – Mark Amery
    Feb 28 '16 at 16:48











  • This is a little old but still pops up in the search engines so - here is a good example of implementation and x-browser brennaobrien.com/blog/2014/05/… . Nothing wrong with the accepted answer, its just a bit out of date.

    – Pete - iCalculator
    Mar 7 '17 at 13:36











  • Is there a javascript-based way to do this programmatically? I'm interested in dynamically modifying the attributes of the thumb element.

    – hrabinowitz
    May 4 '18 at 21:26

















With a combination of javascript? Through CSS, you could have the input not displayed and render wathever's suited :before and :after the element. Then through javascript handle how all that interract with each other.

– Serge
Mar 28 '14 at 11:17





With a combination of javascript? Through CSS, you could have the input not displayed and render wathever's suited :before and :after the element. Then through javascript handle how all that interract with each other.

– Serge
Mar 28 '14 at 11:17













Here is an excellent article on this subject: hongkiat.com/blog/html5-range-slider-style.

– Annie
Dec 7 '14 at 14:30





Here is an excellent article on this subject: hongkiat.com/blog/html5-range-slider-style.

– Annie
Dec 7 '14 at 14:30




2




2





It would be helpful if you'd unaccept the currently accepted answer (and perhaps accept another one that you like). Having an answer saying "don't even try this, the technology is too new" from 5 years ago still pinned to the top of the answer list helps nobody.

– Mark Amery
Feb 28 '16 at 16:48





It would be helpful if you'd unaccept the currently accepted answer (and perhaps accept another one that you like). Having an answer saying "don't even try this, the technology is too new" from 5 years ago still pinned to the top of the answer list helps nobody.

– Mark Amery
Feb 28 '16 at 16:48













This is a little old but still pops up in the search engines so - here is a good example of implementation and x-browser brennaobrien.com/blog/2014/05/… . Nothing wrong with the accepted answer, its just a bit out of date.

– Pete - iCalculator
Mar 7 '17 at 13:36





This is a little old but still pops up in the search engines so - here is a good example of implementation and x-browser brennaobrien.com/blog/2014/05/… . Nothing wrong with the accepted answer, its just a bit out of date.

– Pete - iCalculator
Mar 7 '17 at 13:36













Is there a javascript-based way to do this programmatically? I'm interested in dynamically modifying the attributes of the thumb element.

– hrabinowitz
May 4 '18 at 21:26





Is there a javascript-based way to do this programmatically? I'm interested in dynamically modifying the attributes of the thumb element.

– hrabinowitz
May 4 '18 at 21:26












10 Answers
10






active

oldest

votes


















12














EDIT: nowadays all major browser support both




  • <progress>


  • input[type='range']



Hence you should use one of these two, as explained in other answers, and this should not be the accepted answer anymore.





The <input type="range"> is pretty new and you are already attempting to customize it with CSS. :)



I wouldn't try that for two reasons:




  1. there might be huge compatibility issues now and for the next few (or many) years.
    Think that in nowadays a form control like <select> (available since the web started) is still problematic to be customized with CSS in a cross browser way. For instance if you set a padding for the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding.
    It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).


  2. The <input type="range"> has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a <textarea> into a table, but why don't you simply use a <table> to render tables?!



To show a progress bar in HTML5 you should follow the suggestion given by marcgg in his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:



<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
<p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;">&nbsp;</p>
</div>


Then simply update the style.width of inner P element in percent like:



width: 75%


FYI: if you want to do that in simple JS here is the code:



document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';





share|improve this answer


























  • well I don't exactly know what's the best option to do. I read a tutorial on HTML5 audio tag and there they'd used the input range type to show the progress of the audio being played. So I just want to customize the looks. Any suggestions on what to use for the same???

    – ptamzz
    Aug 25 '10 at 5:41






  • 2





    The suggestion of what to use for the same is in my answer! Use a DIV with a P inside. It shows a progress bar, if you don't believe me, just copy and paste the code in a page and try it. Do you have the link of the tutorial? It seesm odd they suggest to modify via CSS a slider to turn it in a progress bar, it's odd! A slider is something the user can interact with by moving the slider, a progress bar is something the user can only see and not change by moving the mouse over it.

    – Marco Demaio
    Aug 25 '10 at 8:35













  • well thank you very much. I think I'll be using your suggestion. And well it's from dev.opera.com/articles/view/…. Actually they didn't suggest to change it using CSS. They were just using the slider bar but then I don't like the looks so I thought if I could just change it using CSS since I know a little bit of it :)

    – ptamzz
    Aug 25 '10 at 12:30






  • 13





    -1. Answers about 'this is new' are terrible: these days most browsers support HTML5 'range' and 'progress' inputs, and the correct answer is below, but this answer from 2010 about 'don't do that' is still marked as the accepted answer.

    – mikemaccana
    Nov 13 '13 at 11:52








  • 1





    using a slider as a progress bar is not such a terrible idea at all, and it's NOT the same as using a textarea to mimic a table (how would you do that exactly ?), + if you know what platform your site runs on you can use the new tags,(it could for example be limited to mobile phones, or even on type of mobile phone) + sometimes it's just good to do away with the past, it's about time that people use good web browers (instead of IE)

    – Pizzaiola Gorgonzola
    Dec 16 '13 at 19:55





















65














input[type='range'] {
-webkit-appearance: none !important;
background:red;
height:7px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background:blue;
height:10px;
width:10px;
}





share|improve this answer


























  • This works on iOS 5.0 too, which is nice because the default is pretty small for a touch device.

    – Husky
    Oct 21 '11 at 13:01



















22














If you're using HTML 5, why not use the progress tag?



<progress value="1534602" max="4603807">33%</progress>





share|improve this answer





















  • 5





    Is there any browser able to render this?

    – Marco Demaio
    Aug 24 '10 at 12:12













  • I don't think any browser yet renders this, maybe modernizr.com can help?

    – cofiem
    Aug 24 '10 at 13:04






  • 2





    @MarcoDemaio Firefox, Safari and Chrome render it

    – marcgg
    Nov 14 '11 at 11:45






  • 4





    @cofiem Modernizer doesn't help unsupported browsers render new features, it only detects if they support the feature or not.

    – Jake Wilson
    May 9 '12 at 19:06






  • 1





    progress and input[type=range] have different uses, only range is designed for user input.

    – mcfedr
    Oct 6 '13 at 16:10



















13














I did a cross-browser solution (+IE9, FF, Chrome, Safari), only CSS.



[Updated 24.11.2016]



http://codepen.io/nlfonseca/pen/MwbovQ



@import 'bourbon';

$slider-width-number: 240;
$slider-width: #{$slider-width-number}px;
$slider-height: 2px;
$background-slider: #c7c7c7;
$background-filled-slider: #e33d44;
$thumb-width: 28px;
$thumb-height: 18px;
$thumb-radius: 8px;
$thumb-background: #fff;
$thumb-border: 1px solid #777;
$shadow-size: -8px;
$fit-thumb-in-slider: -8px;

@function makelongshadow($color, $size) {
$val: 5px 0 0 $size $color;

@for $i from 6 through $slider-width-number {
$val: #{$val}, #{$i}px 0 0 $size #{$color};
}

@return $val;
}

div {
height: 100px;
display: flex;
justify-content: center;
}

input {
align-items: center;
appearance: none;
background: none;
cursor: pointer;
display: flex;
height: 100%;
min-height: 50px;
overflow: hidden;
width: $slider-width;

&:focus {
box-shadow: none;
outline: none;
}

&::-webkit-slider-runnable-track {
background: $background-filled-slider;
content: '';
height: $slider-height;
pointer-events: none;
}

&::-webkit-slider-thumb {
@include size($thumb-width $thumb-height);

appearance: none;
background: $thumb-background;
border-radius: $thumb-radius;
box-shadow: makelongshadow($background-slider, $shadow-size);
margin-top: $fit-thumb-in-slider;
border: $thumb-border;
}


&::-moz-range-track {
width: $slider-width;
height: $slider-height;
}

&::-moz-range-thumb {
@include size($thumb-width $thumb-height);

background: $thumb-background;
border-radius: $thumb-radius;
border: $thumb-border;
position: relative;
}

&::-moz-range-progress {
height: $slider-height;
background: $background-filled-slider;
border: 0;
margin-top: 0;
}

&::-ms-track {
background: transparent;
border: 0;
border-color: transparent;
border-radius: 0;
border-width: 0;
color: transparent;
height: $slider-height;
margin-top: 10px;
width: $slider-width;
}

&::-ms-thumb {
@include size($thumb-width $thumb-height);

background: $thumb-background;
border-radius: $thumb-radius;
border: $thumb-border;
}

&::-ms-fill-lower {
background: $background-filled-slider;
border-radius: 0;
}

&::-ms-fill-upper {
background: $background-slider;
border-radius: 0;
}

&::-ms-tooltip {
display: none;
}
}





share|improve this answer





















  • 1





    Well done! this is awesome!

    – João Vilaça
    May 26 '15 at 13:03






  • 1





    This is a clever attempt and the response that most closely answers the question. But there are issues with it: it essentially works by elongating the slider control (thumb?). This is fine for dragging but you can only click to set the position of the bar to the right of the slider. Clicking to the left doesn't do anything.

    – Rich Smith
    Jun 10 '15 at 16:20






  • 1





    wonderful solution thank you for all the effort! can't believe they didn't think of skinning a control. oh well just kidding I totally can

    – Lorenzo Boccaccia
    Jun 20 '15 at 15:22






  • 1





    not working on chrome 51

    – fedeghe
    Jul 5 '16 at 9:06






  • 1





    The only real solution I found relies on js

    – fedeghe
    Jul 15 '16 at 11:36



















10














You can in Webkit, through the -webkit-slider-thumb pseudo-element: http://jsfiddle.net/leaverou/BNm8j/






input[type=range] {
-webkit-appearance: none;
background-color: silver;
width: 200px;
height:20px;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #666;
opacity: 0.5;
width: 10px;
height: 26px;
}

<input type="range" min="0" max="100" />





Although the others are right about input type="range" not being the right element for the job.



You should use the <progress> element and for browsers that don't support it, this polyfill: http://lea.verou.me/polyfills/progress/






share|improve this answer





















  • 1





    input type="range" is the right element and progress isn't if user input is desired.

    – Oriol
    Jan 25 '14 at 18:59



















6














You can edit the CSS of the range input, using input[type="range"]::-webkit-slider-thumb and input[type="range"].



Here is the example of it,



http://webstutorial.com/range-input-slider-html5-css3/html-5



I know this is already answered but just sharing it.






share|improve this answer

































    3














    jQuery Tools provides a plug-in that creates stylable elements from a range input, and what's more, makes it still work as a slider in older browsers that don't support input[type=range].



    Allows you to style:




    • the handle

    • the slider

    • optional progress fill

    • value output field


    I've used it many times and it's a great tool.



    WARNING: doesn't work on touch devices. I don't have as much experience with it, but you could try the jQuery mobile slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/



    http://jquerytools.github.io/demos/rangeinput/index.html






    share|improve this answer

































      2














      When I looked at this question I needed something simple. There are already a number of framework answers on how to do this, but sometimes it is more lightweight and flexible just to create your own. Of course, you get a certain amount for free with a framework (and it is often the right choice if it is a good fit), but you then have to worry about framework compatibility, support and digging into the depths of the framework to go outside its boundaries.



      Here is a simple javascript-only slider. Basically it is an img for the slider, an img for the button and a callback with a progress percent. Not an all-singing and dancing slider, but something simple to build on.



      The demo



      The HTML



      <div id='bb_sliderContainer'  ondragstart="return false;" ondrop="return false;">
      <img id='bb_slider' src='slider.png'/>
      <img id='bb_sliderButton' src='sliderbutton.png'/>
      </div>


      The script



      Place in a javascript file:



      (function(bb,undefined){    
      bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate)
      {
      var halfButtonWidth = 5;
      var sliderMoving = false;
      var buttonElement = document.getElementById(buttonCssId);
      var sliderElement = document.getElementById(sliderCssId);
      var length = sliderElement.clientWidth;
      var leftPos = 0;
      var rightPos = leftPos + length;
      length = rightPos - leftPos;

      if( initialPercentage )
      {
      var buttonPos = leftPos + initialPercentage / 100 * length;
      buttonElement.style.left = buttonPos - halfButtonWidth + 'px';
      }

      buttonElement.addEventListener( 'mousedown', function(){
      sliderMoving = true;
      } );

      document.addEventListener( 'mousemove', function(event){
      if( sliderMoving == true )
      {
      var rect = sliderElement.getBoundingClientRect();
      var mouseX = event.clientX - rect.left;
      var prop = mouseX / length;
      if( prop < 0 )
      {
      prop = 0;
      mouseX = 0;
      }
      if( prop > 1 )
      {
      prop = 1;
      mouseX = length;
      }
      buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px';
      progressUpdate(prop * 100);
      }
      });
      document.addEventListener( 'mouseup', function(){
      sliderMoving = false;
      });
      }
      }(window.bb = window.bb || {}));


      Example use



      HTML:



      <img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>


      Javascript:



      function sliderUpdate(percentage)
      {
      var sliderSubject = document.getElementById('bb_sliderSubject');
      sliderSubject.style.width = percentage + '%';
      }
      window.onload=function()
      {
      var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate);
      }





      share|improve this answer

































        2














        This is an example:






        input[type='range'] {
        -webkit-appearance: none;
        border-radius: 5px;
        box-shadow: inset 0 0 5px #333;
        background-color: #999;
        height: 10px;
        vertical-align: middle;
        }
        input[type='range']::-moz-range-track {
        -moz-appearance: none;
        border-radius: 5px;
        box-shadow: inset 0 0 5px #333;
        background-color: #999;
        height: 10px;
        }
        input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        border-radius: 20px;
        background-color: #FFF;
        box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
        border: 1px solid #999;
        height: 20px;
        width: 20px;
        }
        input[type='range']::-moz-range-thumb {
        -moz-appearance: none;
        border-radius: 20px;
        background-color: #FFF;
        box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
        border: 1px solid #999;
        height: 20px;
        width: 20px;
        }

        <input type="range">








        share|improve this answer


























        • From where did the author of the snippet get selector names like moz-range-track? Is there any possibility to find them in chrome?

          – Ini
          Jul 28 '18 at 22:08






        • 1





          @Invader developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track

          – edCoder
          Jul 30 '18 at 6:09



















        1














        See http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range



        It's a tool that produces cross-browser code to style both native and webshims range inputs like you want.



        .ws-range, input[type="range"] {
        /* Range styles: width, height, border-radius, background */
        -webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0;
        }
        .ws-range .ws-range-thumb {
        /* Thumb styles: width, height, border, border-radius, background */
        }
        .ws-range.ws-focus .ws-range-thumb {
        /* Thumb focus styles: border-color, background */
        }
        .ws-range.ws-active .ws-range-thumb {
        /* Thumb active styles: border-color, background */
        }
        .ws-range .ws-range-min {
        /* Thumb progress styles: display, background */
        border-radius: /* same as range */;
        height: 100%;
        }
        input[type="range"]::-moz-range-track {
        border: none;background: transparent;
        }
        input[type="range"]::-ms-tooltip {
        display: none;
        }
        input[type="range"]::-webkit-slider-thumb {
        /* Thumb styles: width, height, border, border-radius, background */
        -webkit-appearance: none;
        }
        input[type="range"]::-ms-track {
        /* Range styles: width, height, border-radius, background */
        color: transparent;border: 0;
        }
        input[type="range"]::-moz-range-thumb {
        /* Thumb styles: width, height, border, border-radius, background */
        }
        input[type="range"]::-ms-thumb {
        /* Thumb styles: width, height, border, border-radius, background */
        }
        input[type="range"]:focus::-webkit-slider-thumb {
        /* Thumb focus styles: border-color, background */
        }
        input[type="range"]:focus::-moz-range-thumb {
        /* Thumb focus styles: border-color, background */
        }
        input[type="range"]:focus::-ms-thumb {
        /* Thumb focus styles: border-color, background */
        }
        input[type="range"]:active::-webkit-slider-thumb {
        /* Thumb active styles: border-color, background */
        }
        input[type="range"]:active::-moz-range-thumb {
        /* Thumb active styles: border-color, background */
        }
        input[type="range"]:active::-ms-thumb {
        /* Thumb active styles: border-color, background */
        }
        input[type="range"]::-moz-range-progress {
        /* Thumb progress styles: display, background */
        border-radius: /* same as range */;
        height: 100%;
        }
        input[type="range"]::-ms-fill-lower {
        /* Thumb progress styles: display, background */
        border-radius: /* same as range */;
        height: 100%;
        }
        .no-cssrangeinput input[type="range"] {
        background: transparent;margin: 0;border: 0;min-height: 51px;
        }





        share|improve this answer



















        • 5





          The link is dead :(

          – Sebastien C.
          May 13 '14 at 14:09











        Your Answer






        StackExchange.ifUsing("editor", function () {
        StackExchange.using("externalEditor", function () {
        StackExchange.using("snippets", function () {
        StackExchange.snippets.init();
        });
        });
        }, "code-snippets");

        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "1"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });














        draft saved

        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f3556157%2fhow-to-customize-the-html5-input-range-type-looks-using-css%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        10 Answers
        10






        active

        oldest

        votes








        10 Answers
        10






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        12














        EDIT: nowadays all major browser support both




        • <progress>


        • input[type='range']



        Hence you should use one of these two, as explained in other answers, and this should not be the accepted answer anymore.





        The <input type="range"> is pretty new and you are already attempting to customize it with CSS. :)



        I wouldn't try that for two reasons:




        1. there might be huge compatibility issues now and for the next few (or many) years.
          Think that in nowadays a form control like <select> (available since the web started) is still problematic to be customized with CSS in a cross browser way. For instance if you set a padding for the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding.
          It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).


        2. The <input type="range"> has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a <textarea> into a table, but why don't you simply use a <table> to render tables?!



        To show a progress bar in HTML5 you should follow the suggestion given by marcgg in his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:



        <div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
        <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;">&nbsp;</p>
        </div>


        Then simply update the style.width of inner P element in percent like:



        width: 75%


        FYI: if you want to do that in simple JS here is the code:



        document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';





        share|improve this answer


























        • well I don't exactly know what's the best option to do. I read a tutorial on HTML5 audio tag and there they'd used the input range type to show the progress of the audio being played. So I just want to customize the looks. Any suggestions on what to use for the same???

          – ptamzz
          Aug 25 '10 at 5:41






        • 2





          The suggestion of what to use for the same is in my answer! Use a DIV with a P inside. It shows a progress bar, if you don't believe me, just copy and paste the code in a page and try it. Do you have the link of the tutorial? It seesm odd they suggest to modify via CSS a slider to turn it in a progress bar, it's odd! A slider is something the user can interact with by moving the slider, a progress bar is something the user can only see and not change by moving the mouse over it.

          – Marco Demaio
          Aug 25 '10 at 8:35













        • well thank you very much. I think I'll be using your suggestion. And well it's from dev.opera.com/articles/view/…. Actually they didn't suggest to change it using CSS. They were just using the slider bar but then I don't like the looks so I thought if I could just change it using CSS since I know a little bit of it :)

          – ptamzz
          Aug 25 '10 at 12:30






        • 13





          -1. Answers about 'this is new' are terrible: these days most browsers support HTML5 'range' and 'progress' inputs, and the correct answer is below, but this answer from 2010 about 'don't do that' is still marked as the accepted answer.

          – mikemaccana
          Nov 13 '13 at 11:52








        • 1





          using a slider as a progress bar is not such a terrible idea at all, and it's NOT the same as using a textarea to mimic a table (how would you do that exactly ?), + if you know what platform your site runs on you can use the new tags,(it could for example be limited to mobile phones, or even on type of mobile phone) + sometimes it's just good to do away with the past, it's about time that people use good web browers (instead of IE)

          – Pizzaiola Gorgonzola
          Dec 16 '13 at 19:55


















        12














        EDIT: nowadays all major browser support both




        • <progress>


        • input[type='range']



        Hence you should use one of these two, as explained in other answers, and this should not be the accepted answer anymore.





        The <input type="range"> is pretty new and you are already attempting to customize it with CSS. :)



        I wouldn't try that for two reasons:




        1. there might be huge compatibility issues now and for the next few (or many) years.
          Think that in nowadays a form control like <select> (available since the web started) is still problematic to be customized with CSS in a cross browser way. For instance if you set a padding for the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding.
          It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).


        2. The <input type="range"> has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a <textarea> into a table, but why don't you simply use a <table> to render tables?!



        To show a progress bar in HTML5 you should follow the suggestion given by marcgg in his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:



        <div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
        <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;">&nbsp;</p>
        </div>


        Then simply update the style.width of inner P element in percent like:



        width: 75%


        FYI: if you want to do that in simple JS here is the code:



        document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';





        share|improve this answer


























        • well I don't exactly know what's the best option to do. I read a tutorial on HTML5 audio tag and there they'd used the input range type to show the progress of the audio being played. So I just want to customize the looks. Any suggestions on what to use for the same???

          – ptamzz
          Aug 25 '10 at 5:41






        • 2





          The suggestion of what to use for the same is in my answer! Use a DIV with a P inside. It shows a progress bar, if you don't believe me, just copy and paste the code in a page and try it. Do you have the link of the tutorial? It seesm odd they suggest to modify via CSS a slider to turn it in a progress bar, it's odd! A slider is something the user can interact with by moving the slider, a progress bar is something the user can only see and not change by moving the mouse over it.

          – Marco Demaio
          Aug 25 '10 at 8:35













        • well thank you very much. I think I'll be using your suggestion. And well it's from dev.opera.com/articles/view/…. Actually they didn't suggest to change it using CSS. They were just using the slider bar but then I don't like the looks so I thought if I could just change it using CSS since I know a little bit of it :)

          – ptamzz
          Aug 25 '10 at 12:30






        • 13





          -1. Answers about 'this is new' are terrible: these days most browsers support HTML5 'range' and 'progress' inputs, and the correct answer is below, but this answer from 2010 about 'don't do that' is still marked as the accepted answer.

          – mikemaccana
          Nov 13 '13 at 11:52








        • 1





          using a slider as a progress bar is not such a terrible idea at all, and it's NOT the same as using a textarea to mimic a table (how would you do that exactly ?), + if you know what platform your site runs on you can use the new tags,(it could for example be limited to mobile phones, or even on type of mobile phone) + sometimes it's just good to do away with the past, it's about time that people use good web browers (instead of IE)

          – Pizzaiola Gorgonzola
          Dec 16 '13 at 19:55
















        12












        12








        12







        EDIT: nowadays all major browser support both




        • <progress>


        • input[type='range']



        Hence you should use one of these two, as explained in other answers, and this should not be the accepted answer anymore.





        The <input type="range"> is pretty new and you are already attempting to customize it with CSS. :)



        I wouldn't try that for two reasons:




        1. there might be huge compatibility issues now and for the next few (or many) years.
          Think that in nowadays a form control like <select> (available since the web started) is still problematic to be customized with CSS in a cross browser way. For instance if you set a padding for the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding.
          It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).


        2. The <input type="range"> has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a <textarea> into a table, but why don't you simply use a <table> to render tables?!



        To show a progress bar in HTML5 you should follow the suggestion given by marcgg in his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:



        <div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
        <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;">&nbsp;</p>
        </div>


        Then simply update the style.width of inner P element in percent like:



        width: 75%


        FYI: if you want to do that in simple JS here is the code:



        document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';





        share|improve this answer















        EDIT: nowadays all major browser support both




        • <progress>


        • input[type='range']



        Hence you should use one of these two, as explained in other answers, and this should not be the accepted answer anymore.





        The <input type="range"> is pretty new and you are already attempting to customize it with CSS. :)



        I wouldn't try that for two reasons:




        1. there might be huge compatibility issues now and for the next few (or many) years.
          Think that in nowadays a form control like <select> (available since the web started) is still problematic to be customized with CSS in a cross browser way. For instance if you set a padding for the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding.
          It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).


        2. The <input type="range"> has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a <textarea> into a table, but why don't you simply use a <table> to render tables?!



        To show a progress bar in HTML5 you should follow the suggestion given by marcgg in his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:



        <div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
        <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;">&nbsp;</p>
        </div>


        Then simply update the style.width of inner P element in percent like:



        width: 75%


        FYI: if you want to do that in simple JS here is the code:



        document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Jan 21 at 21:14

























        answered Aug 24 '10 at 12:30









        Marco DemaioMarco Demaio

        19.6k31110146




        19.6k31110146













        • well I don't exactly know what's the best option to do. I read a tutorial on HTML5 audio tag and there they'd used the input range type to show the progress of the audio being played. So I just want to customize the looks. Any suggestions on what to use for the same???

          – ptamzz
          Aug 25 '10 at 5:41






        • 2





          The suggestion of what to use for the same is in my answer! Use a DIV with a P inside. It shows a progress bar, if you don't believe me, just copy and paste the code in a page and try it. Do you have the link of the tutorial? It seesm odd they suggest to modify via CSS a slider to turn it in a progress bar, it's odd! A slider is something the user can interact with by moving the slider, a progress bar is something the user can only see and not change by moving the mouse over it.

          – Marco Demaio
          Aug 25 '10 at 8:35













        • well thank you very much. I think I'll be using your suggestion. And well it's from dev.opera.com/articles/view/…. Actually they didn't suggest to change it using CSS. They were just using the slider bar but then I don't like the looks so I thought if I could just change it using CSS since I know a little bit of it :)

          – ptamzz
          Aug 25 '10 at 12:30






        • 13





          -1. Answers about 'this is new' are terrible: these days most browsers support HTML5 'range' and 'progress' inputs, and the correct answer is below, but this answer from 2010 about 'don't do that' is still marked as the accepted answer.

          – mikemaccana
          Nov 13 '13 at 11:52








        • 1





          using a slider as a progress bar is not such a terrible idea at all, and it's NOT the same as using a textarea to mimic a table (how would you do that exactly ?), + if you know what platform your site runs on you can use the new tags,(it could for example be limited to mobile phones, or even on type of mobile phone) + sometimes it's just good to do away with the past, it's about time that people use good web browers (instead of IE)

          – Pizzaiola Gorgonzola
          Dec 16 '13 at 19:55





















        • well I don't exactly know what's the best option to do. I read a tutorial on HTML5 audio tag and there they'd used the input range type to show the progress of the audio being played. So I just want to customize the looks. Any suggestions on what to use for the same???

          – ptamzz
          Aug 25 '10 at 5:41






        • 2





          The suggestion of what to use for the same is in my answer! Use a DIV with a P inside. It shows a progress bar, if you don't believe me, just copy and paste the code in a page and try it. Do you have the link of the tutorial? It seesm odd they suggest to modify via CSS a slider to turn it in a progress bar, it's odd! A slider is something the user can interact with by moving the slider, a progress bar is something the user can only see and not change by moving the mouse over it.

          – Marco Demaio
          Aug 25 '10 at 8:35













        • well thank you very much. I think I'll be using your suggestion. And well it's from dev.opera.com/articles/view/…. Actually they didn't suggest to change it using CSS. They were just using the slider bar but then I don't like the looks so I thought if I could just change it using CSS since I know a little bit of it :)

          – ptamzz
          Aug 25 '10 at 12:30






        • 13





          -1. Answers about 'this is new' are terrible: these days most browsers support HTML5 'range' and 'progress' inputs, and the correct answer is below, but this answer from 2010 about 'don't do that' is still marked as the accepted answer.

          – mikemaccana
          Nov 13 '13 at 11:52








        • 1





          using a slider as a progress bar is not such a terrible idea at all, and it's NOT the same as using a textarea to mimic a table (how would you do that exactly ?), + if you know what platform your site runs on you can use the new tags,(it could for example be limited to mobile phones, or even on type of mobile phone) + sometimes it's just good to do away with the past, it's about time that people use good web browers (instead of IE)

          – Pizzaiola Gorgonzola
          Dec 16 '13 at 19:55



















        well I don't exactly know what's the best option to do. I read a tutorial on HTML5 audio tag and there they'd used the input range type to show the progress of the audio being played. So I just want to customize the looks. Any suggestions on what to use for the same???

        – ptamzz
        Aug 25 '10 at 5:41





        well I don't exactly know what's the best option to do. I read a tutorial on HTML5 audio tag and there they'd used the input range type to show the progress of the audio being played. So I just want to customize the looks. Any suggestions on what to use for the same???

        – ptamzz
        Aug 25 '10 at 5:41




        2




        2





        The suggestion of what to use for the same is in my answer! Use a DIV with a P inside. It shows a progress bar, if you don't believe me, just copy and paste the code in a page and try it. Do you have the link of the tutorial? It seesm odd they suggest to modify via CSS a slider to turn it in a progress bar, it's odd! A slider is something the user can interact with by moving the slider, a progress bar is something the user can only see and not change by moving the mouse over it.

        – Marco Demaio
        Aug 25 '10 at 8:35







        The suggestion of what to use for the same is in my answer! Use a DIV with a P inside. It shows a progress bar, if you don't believe me, just copy and paste the code in a page and try it. Do you have the link of the tutorial? It seesm odd they suggest to modify via CSS a slider to turn it in a progress bar, it's odd! A slider is something the user can interact with by moving the slider, a progress bar is something the user can only see and not change by moving the mouse over it.

        – Marco Demaio
        Aug 25 '10 at 8:35















        well thank you very much. I think I'll be using your suggestion. And well it's from dev.opera.com/articles/view/…. Actually they didn't suggest to change it using CSS. They were just using the slider bar but then I don't like the looks so I thought if I could just change it using CSS since I know a little bit of it :)

        – ptamzz
        Aug 25 '10 at 12:30





        well thank you very much. I think I'll be using your suggestion. And well it's from dev.opera.com/articles/view/…. Actually they didn't suggest to change it using CSS. They were just using the slider bar but then I don't like the looks so I thought if I could just change it using CSS since I know a little bit of it :)

        – ptamzz
        Aug 25 '10 at 12:30




        13




        13





        -1. Answers about 'this is new' are terrible: these days most browsers support HTML5 'range' and 'progress' inputs, and the correct answer is below, but this answer from 2010 about 'don't do that' is still marked as the accepted answer.

        – mikemaccana
        Nov 13 '13 at 11:52







        -1. Answers about 'this is new' are terrible: these days most browsers support HTML5 'range' and 'progress' inputs, and the correct answer is below, but this answer from 2010 about 'don't do that' is still marked as the accepted answer.

        – mikemaccana
        Nov 13 '13 at 11:52






        1




        1





        using a slider as a progress bar is not such a terrible idea at all, and it's NOT the same as using a textarea to mimic a table (how would you do that exactly ?), + if you know what platform your site runs on you can use the new tags,(it could for example be limited to mobile phones, or even on type of mobile phone) + sometimes it's just good to do away with the past, it's about time that people use good web browers (instead of IE)

        – Pizzaiola Gorgonzola
        Dec 16 '13 at 19:55







        using a slider as a progress bar is not such a terrible idea at all, and it's NOT the same as using a textarea to mimic a table (how would you do that exactly ?), + if you know what platform your site runs on you can use the new tags,(it could for example be limited to mobile phones, or even on type of mobile phone) + sometimes it's just good to do away with the past, it's about time that people use good web browers (instead of IE)

        – Pizzaiola Gorgonzola
        Dec 16 '13 at 19:55















        65














        input[type='range'] {
        -webkit-appearance: none !important;
        background:red;
        height:7px;
        }
        input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        background:blue;
        height:10px;
        width:10px;
        }





        share|improve this answer


























        • This works on iOS 5.0 too, which is nice because the default is pretty small for a touch device.

          – Husky
          Oct 21 '11 at 13:01
















        65














        input[type='range'] {
        -webkit-appearance: none !important;
        background:red;
        height:7px;
        }
        input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        background:blue;
        height:10px;
        width:10px;
        }





        share|improve this answer


























        • This works on iOS 5.0 too, which is nice because the default is pretty small for a touch device.

          – Husky
          Oct 21 '11 at 13:01














        65












        65








        65







        input[type='range'] {
        -webkit-appearance: none !important;
        background:red;
        height:7px;
        }
        input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        background:blue;
        height:10px;
        width:10px;
        }





        share|improve this answer















        input[type='range'] {
        -webkit-appearance: none !important;
        background:red;
        height:7px;
        }
        input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        background:blue;
        height:10px;
        width:10px;
        }






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Dec 11 '12 at 20:42









        user1895869

        32




        32










        answered Jul 12 '11 at 20:03









        EyalEyal

        659152




        659152













        • This works on iOS 5.0 too, which is nice because the default is pretty small for a touch device.

          – Husky
          Oct 21 '11 at 13:01



















        • This works on iOS 5.0 too, which is nice because the default is pretty small for a touch device.

          – Husky
          Oct 21 '11 at 13:01

















        This works on iOS 5.0 too, which is nice because the default is pretty small for a touch device.

        – Husky
        Oct 21 '11 at 13:01





        This works on iOS 5.0 too, which is nice because the default is pretty small for a touch device.

        – Husky
        Oct 21 '11 at 13:01











        22














        If you're using HTML 5, why not use the progress tag?



        <progress value="1534602" max="4603807">33%</progress>





        share|improve this answer





















        • 5





          Is there any browser able to render this?

          – Marco Demaio
          Aug 24 '10 at 12:12













        • I don't think any browser yet renders this, maybe modernizr.com can help?

          – cofiem
          Aug 24 '10 at 13:04






        • 2





          @MarcoDemaio Firefox, Safari and Chrome render it

          – marcgg
          Nov 14 '11 at 11:45






        • 4





          @cofiem Modernizer doesn't help unsupported browsers render new features, it only detects if they support the feature or not.

          – Jake Wilson
          May 9 '12 at 19:06






        • 1





          progress and input[type=range] have different uses, only range is designed for user input.

          – mcfedr
          Oct 6 '13 at 16:10
















        22














        If you're using HTML 5, why not use the progress tag?



        <progress value="1534602" max="4603807">33%</progress>





        share|improve this answer





















        • 5





          Is there any browser able to render this?

          – Marco Demaio
          Aug 24 '10 at 12:12













        • I don't think any browser yet renders this, maybe modernizr.com can help?

          – cofiem
          Aug 24 '10 at 13:04






        • 2





          @MarcoDemaio Firefox, Safari and Chrome render it

          – marcgg
          Nov 14 '11 at 11:45






        • 4





          @cofiem Modernizer doesn't help unsupported browsers render new features, it only detects if they support the feature or not.

          – Jake Wilson
          May 9 '12 at 19:06






        • 1





          progress and input[type=range] have different uses, only range is designed for user input.

          – mcfedr
          Oct 6 '13 at 16:10














        22












        22








        22







        If you're using HTML 5, why not use the progress tag?



        <progress value="1534602" max="4603807">33%</progress>





        share|improve this answer















        If you're using HTML 5, why not use the progress tag?



        <progress value="1534602" max="4603807">33%</progress>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Sep 30 '13 at 19:22

























        answered Aug 24 '10 at 12:02









        marcggmarcgg

        42.1k45162212




        42.1k45162212








        • 5





          Is there any browser able to render this?

          – Marco Demaio
          Aug 24 '10 at 12:12













        • I don't think any browser yet renders this, maybe modernizr.com can help?

          – cofiem
          Aug 24 '10 at 13:04






        • 2





          @MarcoDemaio Firefox, Safari and Chrome render it

          – marcgg
          Nov 14 '11 at 11:45






        • 4





          @cofiem Modernizer doesn't help unsupported browsers render new features, it only detects if they support the feature or not.

          – Jake Wilson
          May 9 '12 at 19:06






        • 1





          progress and input[type=range] have different uses, only range is designed for user input.

          – mcfedr
          Oct 6 '13 at 16:10














        • 5





          Is there any browser able to render this?

          – Marco Demaio
          Aug 24 '10 at 12:12













        • I don't think any browser yet renders this, maybe modernizr.com can help?

          – cofiem
          Aug 24 '10 at 13:04






        • 2





          @MarcoDemaio Firefox, Safari and Chrome render it

          – marcgg
          Nov 14 '11 at 11:45






        • 4





          @cofiem Modernizer doesn't help unsupported browsers render new features, it only detects if they support the feature or not.

          – Jake Wilson
          May 9 '12 at 19:06






        • 1





          progress and input[type=range] have different uses, only range is designed for user input.

          – mcfedr
          Oct 6 '13 at 16:10








        5




        5





        Is there any browser able to render this?

        – Marco Demaio
        Aug 24 '10 at 12:12







        Is there any browser able to render this?

        – Marco Demaio
        Aug 24 '10 at 12:12















        I don't think any browser yet renders this, maybe modernizr.com can help?

        – cofiem
        Aug 24 '10 at 13:04





        I don't think any browser yet renders this, maybe modernizr.com can help?

        – cofiem
        Aug 24 '10 at 13:04




        2




        2





        @MarcoDemaio Firefox, Safari and Chrome render it

        – marcgg
        Nov 14 '11 at 11:45





        @MarcoDemaio Firefox, Safari and Chrome render it

        – marcgg
        Nov 14 '11 at 11:45




        4




        4





        @cofiem Modernizer doesn't help unsupported browsers render new features, it only detects if they support the feature or not.

        – Jake Wilson
        May 9 '12 at 19:06





        @cofiem Modernizer doesn't help unsupported browsers render new features, it only detects if they support the feature or not.

        – Jake Wilson
        May 9 '12 at 19:06




        1




        1





        progress and input[type=range] have different uses, only range is designed for user input.

        – mcfedr
        Oct 6 '13 at 16:10





        progress and input[type=range] have different uses, only range is designed for user input.

        – mcfedr
        Oct 6 '13 at 16:10











        13














        I did a cross-browser solution (+IE9, FF, Chrome, Safari), only CSS.



        [Updated 24.11.2016]



        http://codepen.io/nlfonseca/pen/MwbovQ



        @import 'bourbon';

        $slider-width-number: 240;
        $slider-width: #{$slider-width-number}px;
        $slider-height: 2px;
        $background-slider: #c7c7c7;
        $background-filled-slider: #e33d44;
        $thumb-width: 28px;
        $thumb-height: 18px;
        $thumb-radius: 8px;
        $thumb-background: #fff;
        $thumb-border: 1px solid #777;
        $shadow-size: -8px;
        $fit-thumb-in-slider: -8px;

        @function makelongshadow($color, $size) {
        $val: 5px 0 0 $size $color;

        @for $i from 6 through $slider-width-number {
        $val: #{$val}, #{$i}px 0 0 $size #{$color};
        }

        @return $val;
        }

        div {
        height: 100px;
        display: flex;
        justify-content: center;
        }

        input {
        align-items: center;
        appearance: none;
        background: none;
        cursor: pointer;
        display: flex;
        height: 100%;
        min-height: 50px;
        overflow: hidden;
        width: $slider-width;

        &:focus {
        box-shadow: none;
        outline: none;
        }

        &::-webkit-slider-runnable-track {
        background: $background-filled-slider;
        content: '';
        height: $slider-height;
        pointer-events: none;
        }

        &::-webkit-slider-thumb {
        @include size($thumb-width $thumb-height);

        appearance: none;
        background: $thumb-background;
        border-radius: $thumb-radius;
        box-shadow: makelongshadow($background-slider, $shadow-size);
        margin-top: $fit-thumb-in-slider;
        border: $thumb-border;
        }


        &::-moz-range-track {
        width: $slider-width;
        height: $slider-height;
        }

        &::-moz-range-thumb {
        @include size($thumb-width $thumb-height);

        background: $thumb-background;
        border-radius: $thumb-radius;
        border: $thumb-border;
        position: relative;
        }

        &::-moz-range-progress {
        height: $slider-height;
        background: $background-filled-slider;
        border: 0;
        margin-top: 0;
        }

        &::-ms-track {
        background: transparent;
        border: 0;
        border-color: transparent;
        border-radius: 0;
        border-width: 0;
        color: transparent;
        height: $slider-height;
        margin-top: 10px;
        width: $slider-width;
        }

        &::-ms-thumb {
        @include size($thumb-width $thumb-height);

        background: $thumb-background;
        border-radius: $thumb-radius;
        border: $thumb-border;
        }

        &::-ms-fill-lower {
        background: $background-filled-slider;
        border-radius: 0;
        }

        &::-ms-fill-upper {
        background: $background-slider;
        border-radius: 0;
        }

        &::-ms-tooltip {
        display: none;
        }
        }





        share|improve this answer





















        • 1





          Well done! this is awesome!

          – João Vilaça
          May 26 '15 at 13:03






        • 1





          This is a clever attempt and the response that most closely answers the question. But there are issues with it: it essentially works by elongating the slider control (thumb?). This is fine for dragging but you can only click to set the position of the bar to the right of the slider. Clicking to the left doesn't do anything.

          – Rich Smith
          Jun 10 '15 at 16:20






        • 1





          wonderful solution thank you for all the effort! can't believe they didn't think of skinning a control. oh well just kidding I totally can

          – Lorenzo Boccaccia
          Jun 20 '15 at 15:22






        • 1





          not working on chrome 51

          – fedeghe
          Jul 5 '16 at 9:06






        • 1





          The only real solution I found relies on js

          – fedeghe
          Jul 15 '16 at 11:36
















        13














        I did a cross-browser solution (+IE9, FF, Chrome, Safari), only CSS.



        [Updated 24.11.2016]



        http://codepen.io/nlfonseca/pen/MwbovQ



        @import 'bourbon';

        $slider-width-number: 240;
        $slider-width: #{$slider-width-number}px;
        $slider-height: 2px;
        $background-slider: #c7c7c7;
        $background-filled-slider: #e33d44;
        $thumb-width: 28px;
        $thumb-height: 18px;
        $thumb-radius: 8px;
        $thumb-background: #fff;
        $thumb-border: 1px solid #777;
        $shadow-size: -8px;
        $fit-thumb-in-slider: -8px;

        @function makelongshadow($color, $size) {
        $val: 5px 0 0 $size $color;

        @for $i from 6 through $slider-width-number {
        $val: #{$val}, #{$i}px 0 0 $size #{$color};
        }

        @return $val;
        }

        div {
        height: 100px;
        display: flex;
        justify-content: center;
        }

        input {
        align-items: center;
        appearance: none;
        background: none;
        cursor: pointer;
        display: flex;
        height: 100%;
        min-height: 50px;
        overflow: hidden;
        width: $slider-width;

        &:focus {
        box-shadow: none;
        outline: none;
        }

        &::-webkit-slider-runnable-track {
        background: $background-filled-slider;
        content: '';
        height: $slider-height;
        pointer-events: none;
        }

        &::-webkit-slider-thumb {
        @include size($thumb-width $thumb-height);

        appearance: none;
        background: $thumb-background;
        border-radius: $thumb-radius;
        box-shadow: makelongshadow($background-slider, $shadow-size);
        margin-top: $fit-thumb-in-slider;
        border: $thumb-border;
        }


        &::-moz-range-track {
        width: $slider-width;
        height: $slider-height;
        }

        &::-moz-range-thumb {
        @include size($thumb-width $thumb-height);

        background: $thumb-background;
        border-radius: $thumb-radius;
        border: $thumb-border;
        position: relative;
        }

        &::-moz-range-progress {
        height: $slider-height;
        background: $background-filled-slider;
        border: 0;
        margin-top: 0;
        }

        &::-ms-track {
        background: transparent;
        border: 0;
        border-color: transparent;
        border-radius: 0;
        border-width: 0;
        color: transparent;
        height: $slider-height;
        margin-top: 10px;
        width: $slider-width;
        }

        &::-ms-thumb {
        @include size($thumb-width $thumb-height);

        background: $thumb-background;
        border-radius: $thumb-radius;
        border: $thumb-border;
        }

        &::-ms-fill-lower {
        background: $background-filled-slider;
        border-radius: 0;
        }

        &::-ms-fill-upper {
        background: $background-slider;
        border-radius: 0;
        }

        &::-ms-tooltip {
        display: none;
        }
        }





        share|improve this answer





















        • 1





          Well done! this is awesome!

          – João Vilaça
          May 26 '15 at 13:03






        • 1





          This is a clever attempt and the response that most closely answers the question. But there are issues with it: it essentially works by elongating the slider control (thumb?). This is fine for dragging but you can only click to set the position of the bar to the right of the slider. Clicking to the left doesn't do anything.

          – Rich Smith
          Jun 10 '15 at 16:20






        • 1





          wonderful solution thank you for all the effort! can't believe they didn't think of skinning a control. oh well just kidding I totally can

          – Lorenzo Boccaccia
          Jun 20 '15 at 15:22






        • 1





          not working on chrome 51

          – fedeghe
          Jul 5 '16 at 9:06






        • 1





          The only real solution I found relies on js

          – fedeghe
          Jul 15 '16 at 11:36














        13












        13








        13







        I did a cross-browser solution (+IE9, FF, Chrome, Safari), only CSS.



        [Updated 24.11.2016]



        http://codepen.io/nlfonseca/pen/MwbovQ



        @import 'bourbon';

        $slider-width-number: 240;
        $slider-width: #{$slider-width-number}px;
        $slider-height: 2px;
        $background-slider: #c7c7c7;
        $background-filled-slider: #e33d44;
        $thumb-width: 28px;
        $thumb-height: 18px;
        $thumb-radius: 8px;
        $thumb-background: #fff;
        $thumb-border: 1px solid #777;
        $shadow-size: -8px;
        $fit-thumb-in-slider: -8px;

        @function makelongshadow($color, $size) {
        $val: 5px 0 0 $size $color;

        @for $i from 6 through $slider-width-number {
        $val: #{$val}, #{$i}px 0 0 $size #{$color};
        }

        @return $val;
        }

        div {
        height: 100px;
        display: flex;
        justify-content: center;
        }

        input {
        align-items: center;
        appearance: none;
        background: none;
        cursor: pointer;
        display: flex;
        height: 100%;
        min-height: 50px;
        overflow: hidden;
        width: $slider-width;

        &:focus {
        box-shadow: none;
        outline: none;
        }

        &::-webkit-slider-runnable-track {
        background: $background-filled-slider;
        content: '';
        height: $slider-height;
        pointer-events: none;
        }

        &::-webkit-slider-thumb {
        @include size($thumb-width $thumb-height);

        appearance: none;
        background: $thumb-background;
        border-radius: $thumb-radius;
        box-shadow: makelongshadow($background-slider, $shadow-size);
        margin-top: $fit-thumb-in-slider;
        border: $thumb-border;
        }


        &::-moz-range-track {
        width: $slider-width;
        height: $slider-height;
        }

        &::-moz-range-thumb {
        @include size($thumb-width $thumb-height);

        background: $thumb-background;
        border-radius: $thumb-radius;
        border: $thumb-border;
        position: relative;
        }

        &::-moz-range-progress {
        height: $slider-height;
        background: $background-filled-slider;
        border: 0;
        margin-top: 0;
        }

        &::-ms-track {
        background: transparent;
        border: 0;
        border-color: transparent;
        border-radius: 0;
        border-width: 0;
        color: transparent;
        height: $slider-height;
        margin-top: 10px;
        width: $slider-width;
        }

        &::-ms-thumb {
        @include size($thumb-width $thumb-height);

        background: $thumb-background;
        border-radius: $thumb-radius;
        border: $thumb-border;
        }

        &::-ms-fill-lower {
        background: $background-filled-slider;
        border-radius: 0;
        }

        &::-ms-fill-upper {
        background: $background-slider;
        border-radius: 0;
        }

        &::-ms-tooltip {
        display: none;
        }
        }





        share|improve this answer















        I did a cross-browser solution (+IE9, FF, Chrome, Safari), only CSS.



        [Updated 24.11.2016]



        http://codepen.io/nlfonseca/pen/MwbovQ



        @import 'bourbon';

        $slider-width-number: 240;
        $slider-width: #{$slider-width-number}px;
        $slider-height: 2px;
        $background-slider: #c7c7c7;
        $background-filled-slider: #e33d44;
        $thumb-width: 28px;
        $thumb-height: 18px;
        $thumb-radius: 8px;
        $thumb-background: #fff;
        $thumb-border: 1px solid #777;
        $shadow-size: -8px;
        $fit-thumb-in-slider: -8px;

        @function makelongshadow($color, $size) {
        $val: 5px 0 0 $size $color;

        @for $i from 6 through $slider-width-number {
        $val: #{$val}, #{$i}px 0 0 $size #{$color};
        }

        @return $val;
        }

        div {
        height: 100px;
        display: flex;
        justify-content: center;
        }

        input {
        align-items: center;
        appearance: none;
        background: none;
        cursor: pointer;
        display: flex;
        height: 100%;
        min-height: 50px;
        overflow: hidden;
        width: $slider-width;

        &:focus {
        box-shadow: none;
        outline: none;
        }

        &::-webkit-slider-runnable-track {
        background: $background-filled-slider;
        content: '';
        height: $slider-height;
        pointer-events: none;
        }

        &::-webkit-slider-thumb {
        @include size($thumb-width $thumb-height);

        appearance: none;
        background: $thumb-background;
        border-radius: $thumb-radius;
        box-shadow: makelongshadow($background-slider, $shadow-size);
        margin-top: $fit-thumb-in-slider;
        border: $thumb-border;
        }


        &::-moz-range-track {
        width: $slider-width;
        height: $slider-height;
        }

        &::-moz-range-thumb {
        @include size($thumb-width $thumb-height);

        background: $thumb-background;
        border-radius: $thumb-radius;
        border: $thumb-border;
        position: relative;
        }

        &::-moz-range-progress {
        height: $slider-height;
        background: $background-filled-slider;
        border: 0;
        margin-top: 0;
        }

        &::-ms-track {
        background: transparent;
        border: 0;
        border-color: transparent;
        border-radius: 0;
        border-width: 0;
        color: transparent;
        height: $slider-height;
        margin-top: 10px;
        width: $slider-width;
        }

        &::-ms-thumb {
        @include size($thumb-width $thumb-height);

        background: $thumb-background;
        border-radius: $thumb-radius;
        border: $thumb-border;
        }

        &::-ms-fill-lower {
        background: $background-filled-slider;
        border-radius: 0;
        }

        &::-ms-fill-upper {
        background: $background-slider;
        border-radius: 0;
        }

        &::-ms-tooltip {
        display: none;
        }
        }






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Feb 20 '17 at 23:08









        Nisse Engström

        4,11892134




        4,11892134










        answered May 26 '15 at 11:01









        nlfonsecanlfonseca

        320410




        320410








        • 1





          Well done! this is awesome!

          – João Vilaça
          May 26 '15 at 13:03






        • 1





          This is a clever attempt and the response that most closely answers the question. But there are issues with it: it essentially works by elongating the slider control (thumb?). This is fine for dragging but you can only click to set the position of the bar to the right of the slider. Clicking to the left doesn't do anything.

          – Rich Smith
          Jun 10 '15 at 16:20






        • 1





          wonderful solution thank you for all the effort! can't believe they didn't think of skinning a control. oh well just kidding I totally can

          – Lorenzo Boccaccia
          Jun 20 '15 at 15:22






        • 1





          not working on chrome 51

          – fedeghe
          Jul 5 '16 at 9:06






        • 1





          The only real solution I found relies on js

          – fedeghe
          Jul 15 '16 at 11:36














        • 1





          Well done! this is awesome!

          – João Vilaça
          May 26 '15 at 13:03






        • 1





          This is a clever attempt and the response that most closely answers the question. But there are issues with it: it essentially works by elongating the slider control (thumb?). This is fine for dragging but you can only click to set the position of the bar to the right of the slider. Clicking to the left doesn't do anything.

          – Rich Smith
          Jun 10 '15 at 16:20






        • 1





          wonderful solution thank you for all the effort! can't believe they didn't think of skinning a control. oh well just kidding I totally can

          – Lorenzo Boccaccia
          Jun 20 '15 at 15:22






        • 1





          not working on chrome 51

          – fedeghe
          Jul 5 '16 at 9:06






        • 1





          The only real solution I found relies on js

          – fedeghe
          Jul 15 '16 at 11:36








        1




        1





        Well done! this is awesome!

        – João Vilaça
        May 26 '15 at 13:03





        Well done! this is awesome!

        – João Vilaça
        May 26 '15 at 13:03




        1




        1





        This is a clever attempt and the response that most closely answers the question. But there are issues with it: it essentially works by elongating the slider control (thumb?). This is fine for dragging but you can only click to set the position of the bar to the right of the slider. Clicking to the left doesn't do anything.

        – Rich Smith
        Jun 10 '15 at 16:20





        This is a clever attempt and the response that most closely answers the question. But there are issues with it: it essentially works by elongating the slider control (thumb?). This is fine for dragging but you can only click to set the position of the bar to the right of the slider. Clicking to the left doesn't do anything.

        – Rich Smith
        Jun 10 '15 at 16:20




        1




        1





        wonderful solution thank you for all the effort! can't believe they didn't think of skinning a control. oh well just kidding I totally can

        – Lorenzo Boccaccia
        Jun 20 '15 at 15:22





        wonderful solution thank you for all the effort! can't believe they didn't think of skinning a control. oh well just kidding I totally can

        – Lorenzo Boccaccia
        Jun 20 '15 at 15:22




        1




        1





        not working on chrome 51

        – fedeghe
        Jul 5 '16 at 9:06





        not working on chrome 51

        – fedeghe
        Jul 5 '16 at 9:06




        1




        1





        The only real solution I found relies on js

        – fedeghe
        Jul 15 '16 at 11:36





        The only real solution I found relies on js

        – fedeghe
        Jul 15 '16 at 11:36











        10














        You can in Webkit, through the -webkit-slider-thumb pseudo-element: http://jsfiddle.net/leaverou/BNm8j/






        input[type=range] {
        -webkit-appearance: none;
        background-color: silver;
        width: 200px;
        height:20px;
        }

        input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: #666;
        opacity: 0.5;
        width: 10px;
        height: 26px;
        }

        <input type="range" min="0" max="100" />





        Although the others are right about input type="range" not being the right element for the job.



        You should use the <progress> element and for browsers that don't support it, this polyfill: http://lea.verou.me/polyfills/progress/






        share|improve this answer





















        • 1





          input type="range" is the right element and progress isn't if user input is desired.

          – Oriol
          Jan 25 '14 at 18:59
















        10














        You can in Webkit, through the -webkit-slider-thumb pseudo-element: http://jsfiddle.net/leaverou/BNm8j/






        input[type=range] {
        -webkit-appearance: none;
        background-color: silver;
        width: 200px;
        height:20px;
        }

        input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: #666;
        opacity: 0.5;
        width: 10px;
        height: 26px;
        }

        <input type="range" min="0" max="100" />





        Although the others are right about input type="range" not being the right element for the job.



        You should use the <progress> element and for browsers that don't support it, this polyfill: http://lea.verou.me/polyfills/progress/






        share|improve this answer





















        • 1





          input type="range" is the right element and progress isn't if user input is desired.

          – Oriol
          Jan 25 '14 at 18:59














        10












        10








        10







        You can in Webkit, through the -webkit-slider-thumb pseudo-element: http://jsfiddle.net/leaverou/BNm8j/






        input[type=range] {
        -webkit-appearance: none;
        background-color: silver;
        width: 200px;
        height:20px;
        }

        input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: #666;
        opacity: 0.5;
        width: 10px;
        height: 26px;
        }

        <input type="range" min="0" max="100" />





        Although the others are right about input type="range" not being the right element for the job.



        You should use the <progress> element and for browsers that don't support it, this polyfill: http://lea.verou.me/polyfills/progress/






        share|improve this answer















        You can in Webkit, through the -webkit-slider-thumb pseudo-element: http://jsfiddle.net/leaverou/BNm8j/






        input[type=range] {
        -webkit-appearance: none;
        background-color: silver;
        width: 200px;
        height:20px;
        }

        input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: #666;
        opacity: 0.5;
        width: 10px;
        height: 26px;
        }

        <input type="range" min="0" max="100" />





        Although the others are right about input type="range" not being the right element for the job.



        You should use the <progress> element and for browsers that don't support it, this polyfill: http://lea.verou.me/polyfills/progress/






        input[type=range] {
        -webkit-appearance: none;
        background-color: silver;
        width: 200px;
        height:20px;
        }

        input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: #666;
        opacity: 0.5;
        width: 10px;
        height: 26px;
        }

        <input type="range" min="0" max="100" />





        input[type=range] {
        -webkit-appearance: none;
        background-color: silver;
        width: 200px;
        height:20px;
        }

        input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: #666;
        opacity: 0.5;
        width: 10px;
        height: 26px;
        }

        <input type="range" min="0" max="100" />






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Mar 2 '17 at 23:37









        Nisse Engström

        4,11892134




        4,11892134










        answered Jan 24 '11 at 21:34









        Lea VerouLea Verou

        18k83645




        18k83645








        • 1





          input type="range" is the right element and progress isn't if user input is desired.

          – Oriol
          Jan 25 '14 at 18:59














        • 1





          input type="range" is the right element and progress isn't if user input is desired.

          – Oriol
          Jan 25 '14 at 18:59








        1




        1





        input type="range" is the right element and progress isn't if user input is desired.

        – Oriol
        Jan 25 '14 at 18:59





        input type="range" is the right element and progress isn't if user input is desired.

        – Oriol
        Jan 25 '14 at 18:59











        6














        You can edit the CSS of the range input, using input[type="range"]::-webkit-slider-thumb and input[type="range"].



        Here is the example of it,



        http://webstutorial.com/range-input-slider-html5-css3/html-5



        I know this is already answered but just sharing it.






        share|improve this answer






























          6














          You can edit the CSS of the range input, using input[type="range"]::-webkit-slider-thumb and input[type="range"].



          Here is the example of it,



          http://webstutorial.com/range-input-slider-html5-css3/html-5



          I know this is already answered but just sharing it.






          share|improve this answer




























            6












            6








            6







            You can edit the CSS of the range input, using input[type="range"]::-webkit-slider-thumb and input[type="range"].



            Here is the example of it,



            http://webstutorial.com/range-input-slider-html5-css3/html-5



            I know this is already answered but just sharing it.






            share|improve this answer















            You can edit the CSS of the range input, using input[type="range"]::-webkit-slider-thumb and input[type="range"].



            Here is the example of it,



            http://webstutorial.com/range-input-slider-html5-css3/html-5



            I know this is already answered but just sharing it.







            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Feb 21 '17 at 4:55









            Nisse Engström

            4,11892134




            4,11892134










            answered Apr 4 '12 at 17:32









            Niraj ChauhanNiraj Chauhan

            3,76183569




            3,76183569























                3














                jQuery Tools provides a plug-in that creates stylable elements from a range input, and what's more, makes it still work as a slider in older browsers that don't support input[type=range].



                Allows you to style:




                • the handle

                • the slider

                • optional progress fill

                • value output field


                I've used it many times and it's a great tool.



                WARNING: doesn't work on touch devices. I don't have as much experience with it, but you could try the jQuery mobile slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/



                http://jquerytools.github.io/demos/rangeinput/index.html






                share|improve this answer






























                  3














                  jQuery Tools provides a plug-in that creates stylable elements from a range input, and what's more, makes it still work as a slider in older browsers that don't support input[type=range].



                  Allows you to style:




                  • the handle

                  • the slider

                  • optional progress fill

                  • value output field


                  I've used it many times and it's a great tool.



                  WARNING: doesn't work on touch devices. I don't have as much experience with it, but you could try the jQuery mobile slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/



                  http://jquerytools.github.io/demos/rangeinput/index.html






                  share|improve this answer




























                    3












                    3








                    3







                    jQuery Tools provides a plug-in that creates stylable elements from a range input, and what's more, makes it still work as a slider in older browsers that don't support input[type=range].



                    Allows you to style:




                    • the handle

                    • the slider

                    • optional progress fill

                    • value output field


                    I've used it many times and it's a great tool.



                    WARNING: doesn't work on touch devices. I don't have as much experience with it, but you could try the jQuery mobile slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/



                    http://jquerytools.github.io/demos/rangeinput/index.html






                    share|improve this answer















                    jQuery Tools provides a plug-in that creates stylable elements from a range input, and what's more, makes it still work as a slider in older browsers that don't support input[type=range].



                    Allows you to style:




                    • the handle

                    • the slider

                    • optional progress fill

                    • value output field


                    I've used it many times and it's a great tool.



                    WARNING: doesn't work on touch devices. I don't have as much experience with it, but you could try the jQuery mobile slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/



                    http://jquerytools.github.io/demos/rangeinput/index.html







                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Mar 3 '17 at 19:00









                    Nisse Engström

                    4,11892134




                    4,11892134










                    answered Mar 12 '13 at 15:23









                    inorganikinorganik

                    12.5k126182




                    12.5k126182























                        2














                        When I looked at this question I needed something simple. There are already a number of framework answers on how to do this, but sometimes it is more lightweight and flexible just to create your own. Of course, you get a certain amount for free with a framework (and it is often the right choice if it is a good fit), but you then have to worry about framework compatibility, support and digging into the depths of the framework to go outside its boundaries.



                        Here is a simple javascript-only slider. Basically it is an img for the slider, an img for the button and a callback with a progress percent. Not an all-singing and dancing slider, but something simple to build on.



                        The demo



                        The HTML



                        <div id='bb_sliderContainer'  ondragstart="return false;" ondrop="return false;">
                        <img id='bb_slider' src='slider.png'/>
                        <img id='bb_sliderButton' src='sliderbutton.png'/>
                        </div>


                        The script



                        Place in a javascript file:



                        (function(bb,undefined){    
                        bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate)
                        {
                        var halfButtonWidth = 5;
                        var sliderMoving = false;
                        var buttonElement = document.getElementById(buttonCssId);
                        var sliderElement = document.getElementById(sliderCssId);
                        var length = sliderElement.clientWidth;
                        var leftPos = 0;
                        var rightPos = leftPos + length;
                        length = rightPos - leftPos;

                        if( initialPercentage )
                        {
                        var buttonPos = leftPos + initialPercentage / 100 * length;
                        buttonElement.style.left = buttonPos - halfButtonWidth + 'px';
                        }

                        buttonElement.addEventListener( 'mousedown', function(){
                        sliderMoving = true;
                        } );

                        document.addEventListener( 'mousemove', function(event){
                        if( sliderMoving == true )
                        {
                        var rect = sliderElement.getBoundingClientRect();
                        var mouseX = event.clientX - rect.left;
                        var prop = mouseX / length;
                        if( prop < 0 )
                        {
                        prop = 0;
                        mouseX = 0;
                        }
                        if( prop > 1 )
                        {
                        prop = 1;
                        mouseX = length;
                        }
                        buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px';
                        progressUpdate(prop * 100);
                        }
                        });
                        document.addEventListener( 'mouseup', function(){
                        sliderMoving = false;
                        });
                        }
                        }(window.bb = window.bb || {}));


                        Example use



                        HTML:



                        <img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>


                        Javascript:



                        function sliderUpdate(percentage)
                        {
                        var sliderSubject = document.getElementById('bb_sliderSubject');
                        sliderSubject.style.width = percentage + '%';
                        }
                        window.onload=function()
                        {
                        var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate);
                        }





                        share|improve this answer






























                          2














                          When I looked at this question I needed something simple. There are already a number of framework answers on how to do this, but sometimes it is more lightweight and flexible just to create your own. Of course, you get a certain amount for free with a framework (and it is often the right choice if it is a good fit), but you then have to worry about framework compatibility, support and digging into the depths of the framework to go outside its boundaries.



                          Here is a simple javascript-only slider. Basically it is an img for the slider, an img for the button and a callback with a progress percent. Not an all-singing and dancing slider, but something simple to build on.



                          The demo



                          The HTML



                          <div id='bb_sliderContainer'  ondragstart="return false;" ondrop="return false;">
                          <img id='bb_slider' src='slider.png'/>
                          <img id='bb_sliderButton' src='sliderbutton.png'/>
                          </div>


                          The script



                          Place in a javascript file:



                          (function(bb,undefined){    
                          bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate)
                          {
                          var halfButtonWidth = 5;
                          var sliderMoving = false;
                          var buttonElement = document.getElementById(buttonCssId);
                          var sliderElement = document.getElementById(sliderCssId);
                          var length = sliderElement.clientWidth;
                          var leftPos = 0;
                          var rightPos = leftPos + length;
                          length = rightPos - leftPos;

                          if( initialPercentage )
                          {
                          var buttonPos = leftPos + initialPercentage / 100 * length;
                          buttonElement.style.left = buttonPos - halfButtonWidth + 'px';
                          }

                          buttonElement.addEventListener( 'mousedown', function(){
                          sliderMoving = true;
                          } );

                          document.addEventListener( 'mousemove', function(event){
                          if( sliderMoving == true )
                          {
                          var rect = sliderElement.getBoundingClientRect();
                          var mouseX = event.clientX - rect.left;
                          var prop = mouseX / length;
                          if( prop < 0 )
                          {
                          prop = 0;
                          mouseX = 0;
                          }
                          if( prop > 1 )
                          {
                          prop = 1;
                          mouseX = length;
                          }
                          buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px';
                          progressUpdate(prop * 100);
                          }
                          });
                          document.addEventListener( 'mouseup', function(){
                          sliderMoving = false;
                          });
                          }
                          }(window.bb = window.bb || {}));


                          Example use



                          HTML:



                          <img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>


                          Javascript:



                          function sliderUpdate(percentage)
                          {
                          var sliderSubject = document.getElementById('bb_sliderSubject');
                          sliderSubject.style.width = percentage + '%';
                          }
                          window.onload=function()
                          {
                          var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate);
                          }





                          share|improve this answer




























                            2












                            2








                            2







                            When I looked at this question I needed something simple. There are already a number of framework answers on how to do this, but sometimes it is more lightweight and flexible just to create your own. Of course, you get a certain amount for free with a framework (and it is often the right choice if it is a good fit), but you then have to worry about framework compatibility, support and digging into the depths of the framework to go outside its boundaries.



                            Here is a simple javascript-only slider. Basically it is an img for the slider, an img for the button and a callback with a progress percent. Not an all-singing and dancing slider, but something simple to build on.



                            The demo



                            The HTML



                            <div id='bb_sliderContainer'  ondragstart="return false;" ondrop="return false;">
                            <img id='bb_slider' src='slider.png'/>
                            <img id='bb_sliderButton' src='sliderbutton.png'/>
                            </div>


                            The script



                            Place in a javascript file:



                            (function(bb,undefined){    
                            bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate)
                            {
                            var halfButtonWidth = 5;
                            var sliderMoving = false;
                            var buttonElement = document.getElementById(buttonCssId);
                            var sliderElement = document.getElementById(sliderCssId);
                            var length = sliderElement.clientWidth;
                            var leftPos = 0;
                            var rightPos = leftPos + length;
                            length = rightPos - leftPos;

                            if( initialPercentage )
                            {
                            var buttonPos = leftPos + initialPercentage / 100 * length;
                            buttonElement.style.left = buttonPos - halfButtonWidth + 'px';
                            }

                            buttonElement.addEventListener( 'mousedown', function(){
                            sliderMoving = true;
                            } );

                            document.addEventListener( 'mousemove', function(event){
                            if( sliderMoving == true )
                            {
                            var rect = sliderElement.getBoundingClientRect();
                            var mouseX = event.clientX - rect.left;
                            var prop = mouseX / length;
                            if( prop < 0 )
                            {
                            prop = 0;
                            mouseX = 0;
                            }
                            if( prop > 1 )
                            {
                            prop = 1;
                            mouseX = length;
                            }
                            buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px';
                            progressUpdate(prop * 100);
                            }
                            });
                            document.addEventListener( 'mouseup', function(){
                            sliderMoving = false;
                            });
                            }
                            }(window.bb = window.bb || {}));


                            Example use



                            HTML:



                            <img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>


                            Javascript:



                            function sliderUpdate(percentage)
                            {
                            var sliderSubject = document.getElementById('bb_sliderSubject');
                            sliderSubject.style.width = percentage + '%';
                            }
                            window.onload=function()
                            {
                            var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate);
                            }





                            share|improve this answer















                            When I looked at this question I needed something simple. There are already a number of framework answers on how to do this, but sometimes it is more lightweight and flexible just to create your own. Of course, you get a certain amount for free with a framework (and it is often the right choice if it is a good fit), but you then have to worry about framework compatibility, support and digging into the depths of the framework to go outside its boundaries.



                            Here is a simple javascript-only slider. Basically it is an img for the slider, an img for the button and a callback with a progress percent. Not an all-singing and dancing slider, but something simple to build on.



                            The demo



                            The HTML



                            <div id='bb_sliderContainer'  ondragstart="return false;" ondrop="return false;">
                            <img id='bb_slider' src='slider.png'/>
                            <img id='bb_sliderButton' src='sliderbutton.png'/>
                            </div>


                            The script



                            Place in a javascript file:



                            (function(bb,undefined){    
                            bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate)
                            {
                            var halfButtonWidth = 5;
                            var sliderMoving = false;
                            var buttonElement = document.getElementById(buttonCssId);
                            var sliderElement = document.getElementById(sliderCssId);
                            var length = sliderElement.clientWidth;
                            var leftPos = 0;
                            var rightPos = leftPos + length;
                            length = rightPos - leftPos;

                            if( initialPercentage )
                            {
                            var buttonPos = leftPos + initialPercentage / 100 * length;
                            buttonElement.style.left = buttonPos - halfButtonWidth + 'px';
                            }

                            buttonElement.addEventListener( 'mousedown', function(){
                            sliderMoving = true;
                            } );

                            document.addEventListener( 'mousemove', function(event){
                            if( sliderMoving == true )
                            {
                            var rect = sliderElement.getBoundingClientRect();
                            var mouseX = event.clientX - rect.left;
                            var prop = mouseX / length;
                            if( prop < 0 )
                            {
                            prop = 0;
                            mouseX = 0;
                            }
                            if( prop > 1 )
                            {
                            prop = 1;
                            mouseX = length;
                            }
                            buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px';
                            progressUpdate(prop * 100);
                            }
                            });
                            document.addEventListener( 'mouseup', function(){
                            sliderMoving = false;
                            });
                            }
                            }(window.bb = window.bb || {}));


                            Example use



                            HTML:



                            <img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>


                            Javascript:



                            function sliderUpdate(percentage)
                            {
                            var sliderSubject = document.getElementById('bb_sliderSubject');
                            sliderSubject.style.width = percentage + '%';
                            }
                            window.onload=function()
                            {
                            var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate);
                            }






                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            edited May 11 '14 at 5:39

























                            answered May 8 '14 at 22:12









                            acarlonacarlon

                            10.4k55073




                            10.4k55073























                                2














                                This is an example:






                                input[type='range'] {
                                -webkit-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                vertical-align: middle;
                                }
                                input[type='range']::-moz-range-track {
                                -moz-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                }
                                input[type='range']::-webkit-slider-thumb {
                                -webkit-appearance: none !important;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }
                                input[type='range']::-moz-range-thumb {
                                -moz-appearance: none;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }

                                <input type="range">








                                share|improve this answer


























                                • From where did the author of the snippet get selector names like moz-range-track? Is there any possibility to find them in chrome?

                                  – Ini
                                  Jul 28 '18 at 22:08






                                • 1





                                  @Invader developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track

                                  – edCoder
                                  Jul 30 '18 at 6:09
















                                2














                                This is an example:






                                input[type='range'] {
                                -webkit-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                vertical-align: middle;
                                }
                                input[type='range']::-moz-range-track {
                                -moz-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                }
                                input[type='range']::-webkit-slider-thumb {
                                -webkit-appearance: none !important;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }
                                input[type='range']::-moz-range-thumb {
                                -moz-appearance: none;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }

                                <input type="range">








                                share|improve this answer


























                                • From where did the author of the snippet get selector names like moz-range-track? Is there any possibility to find them in chrome?

                                  – Ini
                                  Jul 28 '18 at 22:08






                                • 1





                                  @Invader developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track

                                  – edCoder
                                  Jul 30 '18 at 6:09














                                2












                                2








                                2







                                This is an example:






                                input[type='range'] {
                                -webkit-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                vertical-align: middle;
                                }
                                input[type='range']::-moz-range-track {
                                -moz-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                }
                                input[type='range']::-webkit-slider-thumb {
                                -webkit-appearance: none !important;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }
                                input[type='range']::-moz-range-thumb {
                                -moz-appearance: none;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }

                                <input type="range">








                                share|improve this answer















                                This is an example:






                                input[type='range'] {
                                -webkit-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                vertical-align: middle;
                                }
                                input[type='range']::-moz-range-track {
                                -moz-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                }
                                input[type='range']::-webkit-slider-thumb {
                                -webkit-appearance: none !important;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }
                                input[type='range']::-moz-range-thumb {
                                -moz-appearance: none;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }

                                <input type="range">








                                input[type='range'] {
                                -webkit-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                vertical-align: middle;
                                }
                                input[type='range']::-moz-range-track {
                                -moz-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                }
                                input[type='range']::-webkit-slider-thumb {
                                -webkit-appearance: none !important;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }
                                input[type='range']::-moz-range-thumb {
                                -moz-appearance: none;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }

                                <input type="range">





                                input[type='range'] {
                                -webkit-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                vertical-align: middle;
                                }
                                input[type='range']::-moz-range-track {
                                -moz-appearance: none;
                                border-radius: 5px;
                                box-shadow: inset 0 0 5px #333;
                                background-color: #999;
                                height: 10px;
                                }
                                input[type='range']::-webkit-slider-thumb {
                                -webkit-appearance: none !important;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }
                                input[type='range']::-moz-range-thumb {
                                -moz-appearance: none;
                                border-radius: 20px;
                                background-color: #FFF;
                                box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
                                border: 1px solid #999;
                                height: 20px;
                                width: 20px;
                                }

                                <input type="range">






                                share|improve this answer














                                share|improve this answer



                                share|improve this answer








                                edited Mar 3 '17 at 19:16









                                Nisse Engström

                                4,11892134




                                4,11892134










                                answered Aug 23 '14 at 5:23









                                edCoderedCoder

                                850827




                                850827













                                • From where did the author of the snippet get selector names like moz-range-track? Is there any possibility to find them in chrome?

                                  – Ini
                                  Jul 28 '18 at 22:08






                                • 1





                                  @Invader developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track

                                  – edCoder
                                  Jul 30 '18 at 6:09



















                                • From where did the author of the snippet get selector names like moz-range-track? Is there any possibility to find them in chrome?

                                  – Ini
                                  Jul 28 '18 at 22:08






                                • 1





                                  @Invader developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track

                                  – edCoder
                                  Jul 30 '18 at 6:09

















                                From where did the author of the snippet get selector names like moz-range-track? Is there any possibility to find them in chrome?

                                – Ini
                                Jul 28 '18 at 22:08





                                From where did the author of the snippet get selector names like moz-range-track? Is there any possibility to find them in chrome?

                                – Ini
                                Jul 28 '18 at 22:08




                                1




                                1





                                @Invader developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track

                                – edCoder
                                Jul 30 '18 at 6:09





                                @Invader developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track

                                – edCoder
                                Jul 30 '18 at 6:09











                                1














                                See http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range



                                It's a tool that produces cross-browser code to style both native and webshims range inputs like you want.



                                .ws-range, input[type="range"] {
                                /* Range styles: width, height, border-radius, background */
                                -webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0;
                                }
                                .ws-range .ws-range-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                .ws-range.ws-focus .ws-range-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                .ws-range.ws-active .ws-range-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                .ws-range .ws-range-min {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                input[type="range"]::-moz-range-track {
                                border: none;background: transparent;
                                }
                                input[type="range"]::-ms-tooltip {
                                display: none;
                                }
                                input[type="range"]::-webkit-slider-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                -webkit-appearance: none;
                                }
                                input[type="range"]::-ms-track {
                                /* Range styles: width, height, border-radius, background */
                                color: transparent;border: 0;
                                }
                                input[type="range"]::-moz-range-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                input[type="range"]::-ms-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                input[type="range"]:focus::-webkit-slider-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:focus::-moz-range-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:focus::-ms-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:active::-webkit-slider-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]:active::-moz-range-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]:active::-ms-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]::-moz-range-progress {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                input[type="range"]::-ms-fill-lower {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                .no-cssrangeinput input[type="range"] {
                                background: transparent;margin: 0;border: 0;min-height: 51px;
                                }





                                share|improve this answer



















                                • 5





                                  The link is dead :(

                                  – Sebastien C.
                                  May 13 '14 at 14:09
















                                1














                                See http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range



                                It's a tool that produces cross-browser code to style both native and webshims range inputs like you want.



                                .ws-range, input[type="range"] {
                                /* Range styles: width, height, border-radius, background */
                                -webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0;
                                }
                                .ws-range .ws-range-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                .ws-range.ws-focus .ws-range-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                .ws-range.ws-active .ws-range-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                .ws-range .ws-range-min {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                input[type="range"]::-moz-range-track {
                                border: none;background: transparent;
                                }
                                input[type="range"]::-ms-tooltip {
                                display: none;
                                }
                                input[type="range"]::-webkit-slider-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                -webkit-appearance: none;
                                }
                                input[type="range"]::-ms-track {
                                /* Range styles: width, height, border-radius, background */
                                color: transparent;border: 0;
                                }
                                input[type="range"]::-moz-range-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                input[type="range"]::-ms-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                input[type="range"]:focus::-webkit-slider-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:focus::-moz-range-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:focus::-ms-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:active::-webkit-slider-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]:active::-moz-range-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]:active::-ms-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]::-moz-range-progress {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                input[type="range"]::-ms-fill-lower {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                .no-cssrangeinput input[type="range"] {
                                background: transparent;margin: 0;border: 0;min-height: 51px;
                                }





                                share|improve this answer



















                                • 5





                                  The link is dead :(

                                  – Sebastien C.
                                  May 13 '14 at 14:09














                                1












                                1








                                1







                                See http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range



                                It's a tool that produces cross-browser code to style both native and webshims range inputs like you want.



                                .ws-range, input[type="range"] {
                                /* Range styles: width, height, border-radius, background */
                                -webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0;
                                }
                                .ws-range .ws-range-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                .ws-range.ws-focus .ws-range-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                .ws-range.ws-active .ws-range-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                .ws-range .ws-range-min {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                input[type="range"]::-moz-range-track {
                                border: none;background: transparent;
                                }
                                input[type="range"]::-ms-tooltip {
                                display: none;
                                }
                                input[type="range"]::-webkit-slider-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                -webkit-appearance: none;
                                }
                                input[type="range"]::-ms-track {
                                /* Range styles: width, height, border-radius, background */
                                color: transparent;border: 0;
                                }
                                input[type="range"]::-moz-range-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                input[type="range"]::-ms-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                input[type="range"]:focus::-webkit-slider-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:focus::-moz-range-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:focus::-ms-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:active::-webkit-slider-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]:active::-moz-range-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]:active::-ms-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]::-moz-range-progress {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                input[type="range"]::-ms-fill-lower {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                .no-cssrangeinput input[type="range"] {
                                background: transparent;margin: 0;border: 0;min-height: 51px;
                                }





                                share|improve this answer













                                See http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range



                                It's a tool that produces cross-browser code to style both native and webshims range inputs like you want.



                                .ws-range, input[type="range"] {
                                /* Range styles: width, height, border-radius, background */
                                -webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0;
                                }
                                .ws-range .ws-range-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                .ws-range.ws-focus .ws-range-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                .ws-range.ws-active .ws-range-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                .ws-range .ws-range-min {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                input[type="range"]::-moz-range-track {
                                border: none;background: transparent;
                                }
                                input[type="range"]::-ms-tooltip {
                                display: none;
                                }
                                input[type="range"]::-webkit-slider-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                -webkit-appearance: none;
                                }
                                input[type="range"]::-ms-track {
                                /* Range styles: width, height, border-radius, background */
                                color: transparent;border: 0;
                                }
                                input[type="range"]::-moz-range-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                input[type="range"]::-ms-thumb {
                                /* Thumb styles: width, height, border, border-radius, background */
                                }
                                input[type="range"]:focus::-webkit-slider-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:focus::-moz-range-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:focus::-ms-thumb {
                                /* Thumb focus styles: border-color, background */
                                }
                                input[type="range"]:active::-webkit-slider-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]:active::-moz-range-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]:active::-ms-thumb {
                                /* Thumb active styles: border-color, background */
                                }
                                input[type="range"]::-moz-range-progress {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                input[type="range"]::-ms-fill-lower {
                                /* Thumb progress styles: display, background */
                                border-radius: /* same as range */;
                                height: 100%;
                                }
                                .no-cssrangeinput input[type="range"] {
                                background: transparent;margin: 0;border: 0;min-height: 51px;
                                }






                                share|improve this answer












                                share|improve this answer



                                share|improve this answer










                                answered Jan 18 '14 at 23:48









                                OriolOriol

                                157k34264366




                                157k34264366








                                • 5





                                  The link is dead :(

                                  – Sebastien C.
                                  May 13 '14 at 14:09














                                • 5





                                  The link is dead :(

                                  – Sebastien C.
                                  May 13 '14 at 14:09








                                5




                                5





                                The link is dead :(

                                – Sebastien C.
                                May 13 '14 at 14:09





                                The link is dead :(

                                – Sebastien C.
                                May 13 '14 at 14:09


















                                draft saved

                                draft discarded




















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f3556157%2fhow-to-customize-the-html5-input-range-type-looks-using-css%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                3duWbbWAag,zwvD8J2LGI FDDgZq1StN2fbVeHm kR8QQUi8OL8FMfQW,KZHdQG7EHrfOegtHN0B,Dv4WpMgXVPD8j
                                ZszyyvteUR9qwbxMtS4,JgOjKAJ Ud dzHadk4707JrggwW04dVAxMNc33L,ff,JZ,UDT6LHO2n,7iGqVOzu0sV h w3Vk1LpS g1kSnCrR

                                Popular posts from this blog

                                Monofisismo

                                Angular Downloading a file using contenturl with Basic Authentication

                                Olmecas