Styling input range for webkit with pure CSS
Interesting approach being used by the Ionic framework for styling the range input track with just CSS. They are adding a ::before
pseudo-element to the ::-webkit-slider-thumb
, making it as wide as possible and then positioning it on top of the track. (I couldn't get border-radius
to work with it.)
input[type='range'] { width: 210px; height: 30px; overflow: hidden; cursor: pointer;}input[type='range'],input[type='range']::-webkit-slider-runnable-track,input[type='range']::-webkit-slider-thumb { -webkit-appearance: none;}input[type='range']::-webkit-slider-runnable-track { width: 200px; height: 10px; background: #AAA;}input[type='range']::-webkit-slider-thumb { position: relative; height: 30px; width: 30px; margin-top: -10px; background: steelblue; border-radius: 50%; border: 2px solid white;}input[type='range']::-webkit-slider-thumb::before { position: absolute; content: ''; height: 10px; /* equal to height of runnable track */ width: 500px; /* make this bigger than the widest range input element */ left: -502px; /* this should be -2px - width */ top: 8px; /* don't change this */ background: #777;}
<div class="container"> <input type="range" min="0" max="100" value="10" /></div>
Styling input range lower in CSS for Webkit?
To the best of my knowledge, this isn't possible. Below is a snippet from Chrome showing the Shadow DOM elements for <input type="range" />
:
<input type="range">
#shadow-root (user-agent)
<div style="-webkit-appearance:inherit">
<div pseudo="-webkit-slider-runnable-track" id="track">
<div id="thumb">
</div>
</div>
</div>
</input>
In general, you might want to take a look at range.css, it's a cross-browser code generator for custom range sliders. However, it doesn't provide a way to style the ::-moz-range-progress
region. Other example's I've found, including this Codepen snippet, use the deprecated and no-longer-functional deep
shadow-piercing selector. For a fully cross-browser solution, you'll have to make your own element.
How to style HTML5 range input to have different color before and after slider?
Pure CSS solution:
- Chrome: Hide the overflow from
input[range]
, and fill all the space left to
thumb with shadow color. - IE: no need to reinvent the wheel:
::-ms-fill-lower
- Firefox no need to reinvent the wheel:
::-moz-range-progress
/*Chrome*/@media screen and (-webkit-min-device-pixel-ratio:0) { input[type='range'] { overflow: hidden; width: 80px; -webkit-appearance: none; background-color: #9a905d; } input[type='range']::-webkit-slider-runnable-track { height: 10px; -webkit-appearance: none; color: #13bba4; margin-top: -1px; } input[type='range']::-webkit-slider-thumb { width: 10px; -webkit-appearance: none; height: 10px; cursor: ew-resize; background: #434343; box-shadow: -80px 0 0 80px #43e5f7; }
}/** FF*/input[type="range"]::-moz-range-progress { background-color: #43e5f7; }input[type="range"]::-moz-range-track { background-color: #9a905d;}/* IE*/input[type="range"]::-ms-fill-lower { background-color: #43e5f7; }input[type="range"]::-ms-fill-upper { background-color: #9a905d;}
<input type="range"/>
Is it possible to style input type=range with just a left and right color and no thumb?
Here is a working example.
function sliderValueChange(e) {
console.log(e.value);
}
:root {
--slider-width: 300px;
--slider-height: 20px;
}
input[type='range'] {
cursor: ew-resize;
overflow: hidden;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type='range'] {
width: var(--slider-width);
-webkit-appearance: none;
background-color: #353535;
}
input[type='range']::-webkit-slider-runnable-track {
height: var(--slider-height);
-webkit-appearance: none;
color: #13bba4;
margin-top: -1px;
}
input[type='range']::-webkit-slider-thumb {
width: 0px;
-webkit-appearance: none;
height: var(--slider-height);
box-shadow: calc(-1 * var(--slider-width)) 0 0 var(--slider-width) #43e5f7;
}
}
/* FF */
input[type="range"]::-moz-range-progress {
background-color: #43e5f7;
}
input[type="range"]::-moz-range-thumb {
height: var(--slider-height);
width: 0;
border: none;
box-shadow: calc(-1 * var(--slider-width)) 0 0 var(--slider-width) #43e5f7;
box-sizing: border-box;
}
/* IE */
input[type="range"]::-ms-fill-lower {
background-color: #43e5f7;
}
input[type="range"]::-ms-fill-upper {
background-color: #13bba4;
}
<input type="range" onchange="sliderValueChange(this)">
styling a vertical HTML5 range input
So this is an answer, I guess. You need to use other selectors. Read more here.
-webkit-transform:rotate(90deg);
- Make it vertical, tweak margins to suit.
Google is your friend!
From the article:
WEBKIT BASED BROWSERS (CHROME, SAFARI, OPERA)
In webkit based browsers, the track is styled with a special pseudo selector
::-webkit-slider-runnable-track
, and the thumb with::webkit-slider-thumb
.Custom focus styles can also be applied on the thumb and the track. If you go that route, you'll have to remove default focus styles on the input itself.
Here is an example in a fiddle. CSS taken from my previous source.
HTML
<input type="range" />
CSS
input[type=range]{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
css3 - styling input range background
Apparently the line that range is on is called track, Css tricks has a detailed article on how to customize the range input.
Here is the link : https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
hope this helps.
How to customize the HTML5 input range type looks using CSS?
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:
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 apadding
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).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;"> </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%';
Related Topics
4 Columns Elastic CSS with Top-Left Box Spanning 2 Columns. How
iOS 10.3 Safari Text-Align:Justify Bug for Persian/Arabic Content
CSS3 Transform: Translate3D Doesn't Affect The Z-Axis
Integrate Less Version of Bootstrap-Material-Design to Rails Project
What Units Do You Use for CSS for Mobile Web Apps
Onmouseout Event Not Triggered When Moving Mouse Fast (Gwt - All Browsers)
How Center Components Using Flex in React Native
How to Override Material UI .Muicontainer-Maxwidthlg
Input[Type=Select] Doesn't Work for Me
Sass "Error: Can't Find Stylesheet to Import."
Why Don't We Have a // Comment in CSS
Preventing Page Breaks in a Table When Printing