Skip to content

Instantly share code, notes, and snippets.

@arkadiusz-wieczorek

arkadiusz-wieczorek/input-range.css

Created October 11, 2018 06:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arkadiusz-wieczorek/6dbe5a5ff4698c6e58afe2cd80b8cfb6 to your computer and use it in GitHub Desktop.
Save arkadiusz-wieczorek/6dbe5a5ff4698c6e58afe2cd80b8cfb6 to your computer and use it in GitHub Desktop.
Download ZIP
Styling `input[type="range"]`
Raw
input-range.css
// output css
input {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-apperance: none;
background: none;
cursor: pointer;
display: flex;
height: 100%;
overflow: hidden;
width: 240px;
}
input:focus {
box-shadow: none;
outline: none;
}
input::-webkit-slider-runnable-track {
background: #ffb81c;
content: '';
height: 0.25rem;
pointer-events: none;
border-radius: 0.125rem;
}
input::-webkit-slider-thumb {
height: 0.75rem;
width: 0.75rem;
-webkit-appearance: none;
appearance: none;
background: #0f5a70;
border-radius: 50%;
box-shadow: 2px 0 0 -0.225rem #d1d1d1, 6px 0 0 -0.225rem #d1d1d1, 7px 0 0 -0.225rem #d1d1d1,
8px 0 0 -0.225rem #d1d1d1, 9px 0 0 -0.225rem #d1d1d1, 10px 0 0 -0.225rem #d1d1d1, 11px 0 0 -0.225rem #d1d1d1,
12px 0 0 -0.225rem #d1d1d1, 13px 0 0 -0.225rem #d1d1d1, 14px 0 0 -0.225rem #d1d1d1, 15px 0 0 -0.225rem #d1d1d1,
16px 0 0 -0.225rem #d1d1d1, 17px 0 0 -0.225rem #d1d1d1, 18px 0 0 -0.225rem #d1d1d1, 19px 0 0 -0.225rem #d1d1d1,
20px 0 0 -0.225rem #d1d1d1, 21px 0 0 -0.225rem #d1d1d1, 22px 0 0 -0.225rem #d1d1d1, 23px 0 0 -0.225rem #d1d1d1,
24px 0 0 -0.225rem #d1d1d1, 25px 0 0 -0.225rem #d1d1d1, 26px 0 0 -0.225rem #d1d1d1, 27px 0 0 -0.225rem #d1d1d1,
28px 0 0 -0.225rem #d1d1d1, 29px 0 0 -0.225rem #d1d1d1, 30px 0 0 -0.225rem #d1d1d1, 31px 0 0 -0.225rem #d1d1d1,
32px 0 0 -0.225rem #d1d1d1, 33px 0 0 -0.225rem #d1d1d1, 34px 0 0 -0.225rem #d1d1d1, 35px 0 0 -0.225rem #d1d1d1,
36px 0 0 -0.225rem #d1d1d1, 37px 0 0 -0.225rem #d1d1d1, 38px 0 0 -0.225rem #d1d1d1, 39px 0 0 -0.225rem #d1d1d1,
40px 0 0 -0.225rem #d1d1d1, 41px 0 0 -0.225rem #d1d1d1, 42px 0 0 -0.225rem #d1d1d1, 43px 0 0 -0.225rem #d1d1d1,
44px 0 0 -0.225rem #d1d1d1, 45px 0 0 -0.225rem #d1d1d1, 46px 0 0 -0.225rem #d1d1d1, 47px 0 0 -0.225rem #d1d1d1,
48px 0 0 -0.225rem #d1d1d1, 49px 0 0 -0.225rem #d1d1d1, 50px 0 0 -0.225rem #d1d1d1, 51px 0 0 -0.225rem #d1d1d1,
52px 0 0 -0.225rem #d1d1d1, 53px 0 0 -0.225rem #d1d1d1, 54px 0 0 -0.225rem #d1d1d1, 55px 0 0 -0.225rem #d1d1d1,
56px 0 0 -0.225rem #d1d1d1, 57px 0 0 -0.225rem #d1d1d1, 58px 0 0 -0.225rem #d1d1d1, 59px 0 0 -0.225rem #d1d1d1,
60px 0 0 -0.225rem #d1d1d1, 61px 0 0 -0.225rem #d1d1d1, 62px 0 0 -0.225rem #d1d1d1, 63px 0 0 -0.225rem #d1d1d1,
64px 0 0 -0.225rem #d1d1d1, 65px 0 0 -0.225rem #d1d1d1, 66px 0 0 -0.225rem #d1d1d1, 67px 0 0 -0.225rem #d1d1d1,
68px 0 0 -0.225rem #d1d1d1, 69px 0 0 -0.225rem #d1d1d1, 70px 0 0 -0.225rem #d1d1d1, 71px 0 0 -0.225rem #d1d1d1,
72px 0 0 -0.225rem #d1d1d1, 73px 0 0 -0.225rem #d1d1d1, 74px 0 0 -0.225rem #d1d1d1, 75px 0 0 -0.225rem #d1d1d1,
76px 0 0 -0.225rem #d1d1d1, 77px 0 0 -0.225rem #d1d1d1, 78px 0 0 -0.225rem #d1d1d1, 79px 0 0 -0.225rem #d1d1d1,
80px 0 0 -0.225rem #d1d1d1, 81px 0 0 -0.225rem #d1d1d1, 82px 0 0 -0.225rem #d1d1d1, 83px 0 0 -0.225rem #d1d1d1,
84px 0 0 -0.225rem #d1d1d1, 85px 0 0 -0.225rem #d1d1d1, 86px 0 0 -0.225rem #d1d1d1, 87px 0 0 -0.225rem #d1d1d1,
88px 0 0 -0.225rem #d1d1d1, 89px 0 0 -0.225rem #d1d1d1, 90px 0 0 -0.225rem #d1d1d1, 91px 0 0 -0.225rem #d1d1d1,
92px 0 0 -0.225rem #d1d1d1, 93px 0 0 -0.225rem #d1d1d1, 94px 0 0 -0.225rem #d1d1d1, 95px 0 0 -0.225rem #d1d1d1,
96px 0 0 -0.225rem #d1d1d1, 97px 0 0 -0.225rem #d1d1d1, 98px 0 0 -0.225rem #d1d1d1, 99px 0 0 -0.225rem #d1d1d1,
100px 0 0 -0.225rem #d1d1d1, 101px 0 0 -0.225rem #d1d1d1, 102px 0 0 -0.225rem #d1d1d1,
103px 0 0 -0.225rem #d1d1d1, 104px 0 0 -0.225rem #d1d1d1, 105px 0 0 -0.225rem #d1d1d1,
106px 0 0 -0.225rem #d1d1d1, 107px 0 0 -0.225rem #d1d1d1, 108px 0 0 -0.225rem #d1d1d1,
109px 0 0 -0.225rem #d1d1d1, 110px 0 0 -0.225rem #d1d1d1, 111px 0 0 -0.225rem #d1d1d1,
112px 0 0 -0.225rem #d1d1d1, 113px 0 0 -0.225rem #d1d1d1, 114px 0 0 -0.225rem #d1d1d1,
115px 0 0 -0.225rem #d1d1d1, 116px 0 0 -0.225rem #d1d1d1, 117px 0 0 -0.225rem #d1d1d1,
118px 0 0 -0.225rem #d1d1d1, 119px 0 0 -0.225rem #d1d1d1, 120px 0 0 -0.225rem #d1d1d1,
121px 0 0 -0.225rem #d1d1d1, 122px 0 0 -0.225rem #d1d1d1, 123px 0 0 -0.225rem #d1d1d1,
124px 0 0 -0.225rem #d1d1d1, 125px 0 0 -0.225rem #d1d1d1, 126px 0 0 -0.225rem #d1d1d1,
127px 0 0 -0.225rem #d1d1d1, 128px 0 0 -0.225rem #d1d1d1, 129px 0 0 -0.225rem #d1d1d1,
130px 0 0 -0.225rem #d1d1d1, 131px 0 0 -0.225rem #d1d1d1, 132px 0 0 -0.225rem #d1d1d1,
133px 0 0 -0.225rem #d1d1d1, 134px 0 0 -0.225rem #d1d1d1, 135px 0 0 -0.225rem #d1d1d1,
136px 0 0 -0.225rem #d1d1d1, 137px 0 0 -0.225rem #d1d1d1, 138px 0 0 -0.225rem #d1d1d1,
139px 0 0 -0.225rem #d1d1d1, 140px 0 0 -0.225rem #d1d1d1, 141px 0 0 -0.225rem #d1d1d1,
142px 0 0 -0.225rem #d1d1d1, 143px 0 0 -0.225rem #d1d1d1, 144px 0 0 -0.225rem #d1d1d1,
145px 0 0 -0.225rem #d1d1d1, 146px 0 0 -0.225rem #d1d1d1, 147px 0 0 -0.225rem #d1d1d1,
148px 0 0 -0.225rem #d1d1d1, 149px 0 0 -0.225rem #d1d1d1, 150px 0 0 -0.225rem #d1d1d1,
151px 0 0 -0.225rem #d1d1d1, 152px 0 0 -0.225rem #d1d1d1, 153px 0 0 -0.225rem #d1d1d1,
154px 0 0 -0.225rem #d1d1d1, 155px 0 0 -0.225rem #d1d1d1, 156px 0 0 -0.225rem #d1d1d1,
157px 0 0 -0.225rem #d1d1d1, 158px 0 0 -0.225rem #d1d1d1, 159px 0 0 -0.225rem #d1d1d1,
160px 0 0 -0.225rem #d1d1d1, 161px 0 0 -0.225rem #d1d1d1, 162px 0 0 -0.225rem #d1d1d1,
163px 0 0 -0.225rem #d1d1d1, 164px 0 0 -0.225rem #d1d1d1, 165px 0 0 -0.225rem #d1d1d1,
166px 0 0 -0.225rem #d1d1d1, 167px 0 0 -0.225rem #d1d1d1, 168px 0 0 -0.225rem #d1d1d1,
169px 0 0 -0.225rem #d1d1d1, 170px 0 0 -0.225rem #d1d1d1, 171px 0 0 -0.225rem #d1d1d1,
172px 0 0 -0.225rem #d1d1d1, 173px 0 0 -0.225rem #d1d1d1, 174px 0 0 -0.225rem #d1d1d1,
175px 0 0 -0.225rem #d1d1d1, 176px 0 0 -0.225rem #d1d1d1, 177px 0 0 -0.225rem #d1d1d1,
178px 0 0 -0.225rem #d1d1d1, 179px 0 0 -0.225rem #d1d1d1, 180px 0 0 -0.225rem #d1d1d1,
181px 0 0 -0.225rem #d1d1d1, 182px 0 0 -0.225rem #d1d1d1, 183px 0 0 -0.225rem #d1d1d1,
184px 0 0 -0.225rem #d1d1d1, 185px 0 0 -0.225rem #d1d1d1, 186px 0 0 -0.225rem #d1d1d1,
187px 0 0 -0.225rem #d1d1d1, 188px 0 0 -0.225rem #d1d1d1, 189px 0 0 -0.225rem #d1d1d1,
190px 0 0 -0.225rem #d1d1d1, 191px 0 0 -0.225rem #d1d1d1, 192px 0 0 -0.225rem #d1d1d1,
193px 0 0 -0.225rem #d1d1d1, 194px 0 0 -0.225rem #d1d1d1, 195px 0 0 -0.225rem #d1d1d1,
196px 0 0 -0.225rem #d1d1d1, 197px 0 0 -0.225rem #d1d1d1, 198px 0 0 -0.225rem #d1d1d1,
199px 0 0 -0.225rem #d1d1d1, 200px 0 0 -0.225rem #d1d1d1, 201px 0 0 -0.225rem #d1d1d1,
202px 0 0 -0.225rem #d1d1d1, 203px 0 0 -0.225rem #d1d1d1, 204px 0 0 -0.225rem #d1d1d1,
205px 0 0 -0.225rem #d1d1d1, 206px 0 0 -0.225rem #d1d1d1, 207px 0 0 -0.225rem #d1d1d1,
208px 0 0 -0.225rem #d1d1d1, 209px 0 0 -0.225rem #d1d1d1, 210px 0 0 -0.225rem #d1d1d1,
211px 0 0 -0.225rem #d1d1d1, 212px 0 0 -0.225rem #d1d1d1, 213px 0 0 -0.225rem #d1d1d1,
214px 0 0 -0.225rem #d1d1d1, 215px 0 0 -0.225rem #d1d1d1, 216px 0 0 -0.225rem #d1d1d1,
217px 0 0 -0.225rem #d1d1d1, 218px 0 0 -0.225rem #d1d1d1, 219px 0 0 -0.225rem #d1d1d1,
220px 0 0 -0.225rem #d1d1d1, 221px 0 0 -0.225rem #d1d1d1, 222px 0 0 -0.225rem #d1d1d1,
223px 0 0 -0.225rem #d1d1d1, 224px 0 0 -0.225rem #d1d1d1, 225px 0 0 -0.225rem #d1d1d1,
226px 0 0 -0.225rem #d1d1d1, 227px 0 0 -0.225rem #d1d1d1, 228px 0 0 -0.225rem #d1d1d1,
229px 0 0 -0.225rem #d1d1d1, 230px 0 0 -0.225rem #d1d1d1, 231px 0 0 -0.225rem #d1d1d1,
232px 0 0 -0.225rem #d1d1d1, 233px 0 0 -0.225rem #d1d1d1, 234px 0 0 -0.225rem #d1d1d1,
235px 0 0 -0.225rem #d1d1d1, 236px 0 0 -0.225rem #d1d1d1, 237px 0 0 -0.225rem #d1d1d1,
238px 0 0 -0.225rem #d1d1d1, 239px 0 0 -0.225rem #d1d1d1, 240px 0 0 -0.225rem #d1d1d1;
margin-top: -0.25rem;
}
input::-moz-range-track {
width: 240px;
height: 0.25rem;
background: #d1d1d1;
border-radius: 0.125rem;
}
input::-moz-range-thumb {
height: 0.75rem;
width: 0.75rem;
background: #0f5a70;
border-radius: 50%;
border: none;
position: relative;
}
input::-moz-range-progress {
height: 0.25rem;
background: #ffb81c;
border: 0;
margin-top: 0;
border-radius: 0.125rem;
}
input::-ms-track {
background: transparent;
border: 0;
border-color: transparent;
border-radius: 0;
border-width: 0;
color: transparent;
height: 0.25rem;
margin-top: 10px;
width: 240px;
}
input::-ms-thumb {
height: 0.75rem;
width: 0.75rem;
background: #0f5a70;
border-radius: 50%;
}
input::-ms-fill-lower {
background: #ffb81c;
border-radius: 0;
border-radius: 0.125rem;
}
input::-ms-fill-upper {
background: #d1d1d1;
border-radius: 0;
}
input::-ms-tooltip {
display: none;
}
Raw
input-range.scss
// scss
// inspired by https://codepen.io/nlfonseca/pen/MwbovQ
import 'bourbon';
$slider-width-number: 240;
$slider-width: #{$slider-width-number}px;
$slider-height: 0.25rem;
$background-slider: #d1d1d1;
$background-filled-slider: #ffb81c;
$thumb-width: 0.75rem;
$thumb-height: 0.75rem;
$thumb-radius: 50%;
$thumb-background: #0f5a70;
$shadow-size: -0.225rem;
$fit-thumb-in-slider: -0.25rem;
@function makelongshadow($color, $size) {
$val: 2px 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;
-webkit-apperance: none;
background: none;
cursor: pointer;
display: flex;
height: 100%;
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;
border-radius: 0.125rem;
}
&::-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;
}
&::-moz-range-track {
width: $slider-width;
height: $slider-height;
background: $background-slider;
border-radius: 0.125rem;
}
&::-moz-range-thumb {
@include size($thumb-width $thumb-height);
background: $thumb-background;
border-radius: $thumb-radius;
border: none;
position: relative;
}
&::-moz-range-progress {
height: $slider-height;
background: $background-filled-slider;
border: 0;
margin-top: 0;
border-radius: 0.125rem;
}
&::-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;
}
&::-ms-fill-lower {
background: $background-filled-slider;
border-radius: 0;
border-radius: 0.125rem;
}
&::-ms-fill-upper {
background: $background-slider;
border-radius: 0;
}
&::-ms-tooltip {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment