Is there any way to style <input type="range">
elements for Webkit browsers?
There is a pretty good article on styling a range to make it look like an iPhone slider written by David B. Calhoun.
I think the blog post should cover most aspects of styling a range input type.
Here is some of the CSS:
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
width: 68px;
height: 44px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #fefefe),
color-stop(0.49, #dddddd),
color-stop(0.51, #d1d1d1),
color-stop(1, #a1a1a1)
);
background-repeat: no-repeat;
background-position: 50%;
}
I've only heard of the type range
, not slider
.
input[type="range"] {
-webkit-appearance: slider-horizontal;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With