Cross-browser vertical input range slider with custom styling
As suggested in this answer, use transform to make the slider vertical, so you can set -webkit-appearance
to none
.
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;
}
How to display a range input slider vertically
First, set height greater than width. In theory, this is all you should need. The HTML5 Spec suggests as much:
... the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties.
Opera had it implemented this way, but Opera is now using WebKit Blink. As of today, no browser implements a vertical slider based solely on height being greater than width. And now that suggestion is under review by WHATWG.
Regardless, setting height greater than width is needed to get the layout right between browsers. Applying left and right padding will also help with layout and positioning.
For Chrome, use -webkit-appearance: slider-vertical
.
For IE, use writing-mode: bt-lr
.
For Firefox, add an orient="vertical"
attribute to the html. Pity that they did it this way. Visual styles should be controlled via CSS, not HTML.
input[type=range][orient=vertical]
{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Chromium */
width: 8px;
height: 175px;
padding: 0 5px;
}
<input type="range" orient="vertical" />
Vertical range input with custom CSS which also respects parent's dimensions
This is currently not possible: https://code.google.com/p/chromium/issues/detail?id=341071
Issue 341071: Impossible to style vertical input type=range.
What steps will reproduce the problem?
1. Create input <input type="file" class="slider" >
2. Style this element with CSS: .slider{-webkit-appearance: none; background: url(image.png);}
3. Change orientation: .slider.vertical{-webkit-appearance: slider-vertical;}
What is the expected result?
Input become vertical with custom background.
What happens instead?
Input become vertical, but without custom background.
Why does custom CSS styling not apply due to vertical slider?
It seems like there is no work around available to design vertical range, what you can do is to rotate the default one.
.wrap {
display: flex;
}
.slid1 {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 30px;
}
#slider1,
#slider2 {
-webkit-appearance: none;
/* the difference. */
background-color: black;
width: 100px;
height: 1px;
}
#slider1 {
-webkit-appearance: none;
/* This makes ... */
transform: rotate(270deg);
transform-origin: center;
}
#slider1::-webkit-slider-thumb,
#slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04aa6d;
cursor: pointer;
}
#slider1::-webkit-slider-thumb:hover,
#slider2::-webkit-slider-thumb:hover {
width: 20px;
height: 20px;
}
<div class="wrap">
<div class="slid1">
<input type="range" id="slider1" />
</div>
<div class="slid2">
<input type="range" id="slider2" />
</div>
</div>
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%';
HTML5 input type range show range value
This uses javascript, not jquery directly. It might help get you started.
function updateTextInput(val) { document.getElementById('textInput').value=val; }
<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);"><input type="text" id="textInput" value="">
Related Topics
Less - Nesting Generates Bad CSS Code
Sass Image CSS Cache Busting (Via Compass)
Vertically Stretch Background Image
Is It Ok to Use Multiple Pseudo-Elements in CSS
Create a Complex CSS Shape (Speaking Bubble)
React-Native: Substitute for Flex-Basis
CSS-Transform Animation Causing to Flickering
Split Page Vertically Using CSS
Images Not Showing in Phonegap Build Application
Resource Interpreted as Stylesheet But Transferred with Mime Type Text/HTML
Font Face Causes Performance Issues
How to Keep a Div Always on The Screen, But Not Always in a Fixed Position
How to Scroll Programmatically a Div with Its Own Scrollbars
Div with Double Arrow on Top and Bottom
Background with Radius-Top Inside
Div with 100% Width of Screen, But Inside a Parent Div with Fixed Width