Is there a way to style HTML5's range control?

Question

Is there a way to style HTML5's range control? Is it possible to change the color of the line the slider slides on?

score 38 · Accepted Answer · answered Jun 10 '10 at 20:04

38

Turns out, there is in webkit:

 input[type="range"]{
   -webkit-appearance:none !important;
 }

 input[type="range"]::-webkit-slider-thumb{
   -webkit-appearance:none !important;  
 }

You can then add whatever attributes you need to each those selectors. Background, gradient, etc...

Hope that helps!

answered Jun 10 '10 at 20:04

majman

1,993
14
23

1

Its just hiding the range control. How to stylize it? I mean what properties we need to set? – coure2011 Sep 27 '10 at 09:09
just add something like: height: 20px; background-color: red; – case nelson Dec 09 '10 at 21:02
Yes, it is possible. Check this link http://jsfiddle.net/jalbertbowdenii/7Nzgw/3/ – Teknotica Jul 30 '12 at 08:41
@Teknotica your example fails in FF – Jason Aug 16 '12 at 22:57
@Teknotica sorry, i just realized that `range` fails in FF in general, ha. didn't expect that. – Jason Aug 16 '12 at 23:17
It's important to note that you can't just set -webkit-appearance: none; on just the slider thumb, it needs to be set on the input as well. – Kevin C. Sep 14 '13 at 05:18

shakaran · Answer 2 · 2014-12-13T20:58:43.370

A full example of css for customization (at this moment for webkit):

input[type="range"]{
    background: rgb(94, 30, 30);
    width: 130px;
    height: 6px;
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}

input[type="range"]:hover{
    background: rgb(194, 139, 131);
    width: 130px;
    height: 6px;
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}

input[type="range"]::-webkit-slider-thumb{
   -webkit-appearance:none !important;  
   width:25px;
   height:15px;
   -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border:1px solid black;

    background: #a90329;
    background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019));
    background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
    background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
    background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
    background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );
 }

input[type="range"]::-webkit-slider-thumb:hover{
   -webkit-appearance:none !important;  
   width:25px;
   height:15px;
   -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background-color:rgb(56, 13, 13);
    border:1px solid black;

    background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254));
    background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
    background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
    background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
    background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 );
 }

what is -wekkit*? you have this in some places and I am unsure as to whether or not it is intentional or accidental. — funkymushroom, Dec 11 '14 at 21:56
its a prefix for browsers based in WebKit engine (CSS vendor) http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm — shakaran, Dec 11 '14 at 22:37
I was asking about "-wekkit" (note the double k) in some of the lines above, as opposed to the standard "-webkit". I think its probably a typo. : ) — funkymushroom, Dec 12 '14 at 17:14

score 3 · Answer 3 · answered Mar 22 '17 at 01:09

On the top answer its already described. I just customize it on my way. Take a look its may help you.

Add below code on CSS:

input:focus{ 
  outline-color: transparent;
}
input[type="range"]{ 
  -webkit-appearance:none; 
  -moz-apperance:none; 
  height: 6px; 
  background-color: #b6b6b6;
  outline-color: transparent;  
}
input::-webkit-slider-thumb{
  -webkit-appearance:none; 
  -moz-apperance:none; 
  width:16px; 
  height:16px;
  -webkit-border-radius:10px; 
  -moz-border-radius:10px; 
  -ms-border-radius:10px; 
  -o-border-radius:10px; 
  border-radius:10px;
  background-color: #20b373;
  overflow: visible;
}

Live Demo

Is there a way to style HTML5's range control?

3 Answers3

Linked

Related