How to customize HTML5 input range type using CSS?

Question

I want to customize the appearance of the range input type in HTML5 to look like a progress bar. I tried to apply some common CSS attributes using the CSS class, but it seems like they are not working.

Can someone tell me how to set it up?

Answer 1

EDIT : currently all major browsers support both

• <progress>

• input [type = "Range"]

Therefore, you must use one of these two, as explained in the other answers , and this should no longer be an accepted answer.

---

<input type="range"> pretty new and you're already trying to customize it using CSS. :)

I would not do this for two reasons:

1. huge compatibility issues can arise now and over the next few (or many) years . Consider now that a form control, such as a <select> (accessible since the launch of the Internet), still remains problematic for CSS customization in a cross-browser fashion. For example, if you set padding for select boxes, many browsers (IE7, OPERA9, CHROME5, SAFARI4) will completely ignore padding. Only IE8 works on FF 3.6. (all tests run with HTML5 DOCTYPE, therefore in standard mode).

2. <input type="range"> was created to show a slider, NOT a progress bar , trying to trick it with CSS to turn the slider into a progress bar, it sounds weird. Like trying to use CSS to convert <textarea> to table, but why don't you just use <table> to render tables ?!

To display a progress indicator in HTML5, you must follow the sentence that marcgg gave in his answer. Since no browser currently displays it, you can use a simple div with ap inside, for example:

 <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 just update the style.width inner P element as a percentage, for example:

 width: 75% 

For your information: if you want to make this simple JS, here is the code:

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

Answer 2

 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; } 

Answer 3

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

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

Answer 4

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

[Updated 11.24.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; } } 

Answer 5

In Webkit, you can use the -webkit-slider-thumb : 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 others are right with respect to input type="range" , which is not the right entry for the job.

You must use the <progress> element and for browsers that do not support it, this is polyfill: http://lea.verou.me/polyfills/progress/

Answer 6

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

Here is an example of this,

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

I know that they already answered it, but just shared it.

Answer 7

jQuery Tools provides a plugin that creates stylable elements from a range input, and what’s more, it still works as a slider in older browsers that do not support input[type=range] .

Lets you style:

• descriptor
• slider
• optional runtime
• output field value

I have used it many times and it is a great tool.

WARNING: does not work on touch devices. I don't have much experience, but you can try the jQuery mobile slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

http://jquerytools.imtqy.com/demos/rangeinput/index.html

Answer 8

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 they are easier and more flexible to create your own. Of course, you get a certain amount for free using the framework (and often this is the right choice if it suits), but then you need to worry about compatibility with the framework, support and digging in the back of the frame to go beyond its borders.

Here is a simple javascript slider. This is mainly img for the slider, img for the button and callback with a percentage of progress. Not a complete and dance slider, but something easy to use.

Demo

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> 

script

Place in 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 || {})); 

Usage example

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); } 

Answer 9

That's 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"> 

Answer 10

See http://afarkas.imtqy.com/webshim/demos/demos/webforms/styler/index.html?range

This is a tool that creates cross-browser code to create both input and internal inputs as 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; }