Skip to content

Instantly share code, notes, and snippets.

@wolfy1339

wolfy1339/index.html

Forked from anonymous/index.html
Last active March 8, 2018 15:58
Show Gist options
  • Save wolfy1339/13b90834399cc4ed3e2cc0aa6f512cab to your computer and use it in GitHub Desktop.
Save wolfy1339/13b90834399cc4ed3e2cc0aa6f512cab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="jsbin.vijosojile.css" rel="stylesheet">
</head>
<body>
<input type="range">
</body>
</html>
Raw
jsbin.vijosojile.css
body {
background-color: #eee;
padding: 10px;
padding-left: 10%
}
input[type='range'] {
-webkit-appearance: none;
display: inline-block;
margin: 5px 0;
width: 100%;
}
input[type='range']:focus {
outline: 0;
}
input[type='range']:focus::-webkit-slider-runnable-track {
background: #5e6565;
}
input[type='range']:focus::-ms-fill-lower {
background: #484d4d;
}
input[type='range']:focus::-ms-fill-upper {
background: #5e6565;
}
input[type='range']::-webkit-slider-runnable-track {
cursor: pointer;
height: 0.7px;
transition: all .2s ease;
width: 100%;
background: #484d4d;
border: 2px solid #cfd8dc;
box-shadow: 1px 1px 1px black, 0 0 1px #0d0d0d;
}
input[type='range']::-webkit-slider-thumb {
box-shadow: 0 0 1px #670000, 0 0 0 #810000;
background: rgba(0, 0, 0, 0.97);
border: 0 solid #ff1e00;
border-radius: 10px;
cursor: pointer;
height: 10px;
width: 10px;
-webkit-appearance: none;
box-shadow: 0 0 1px #670000, 0 0 0 #810000;
margin-top: -4.65px;
}
input[type='range']::-moz-range-track {
cursor: pointer;
height: 0.7px;
transition: all .2s ease;
width: 100%;
background: #484d4d;
border: 2px solid #cfd8dc;
box-shadow: 1px 1px 1px black, 0 0 1px #0d0d0d;
}
input[type='range']::-moz-range-thumb {
box-shadow: 0 0 1px #670000, 0 0 0 #810000;
background: rgba(0, 0, 0, 0.97);
border: 0 solid #ff1e00;
border-radius: 10px;
cursor: pointer;
height: 10px;
width: 10px;
box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
}
input[type='range']::-moz-range-progress {
background: #484d4d;
border: 2px solid #cfd8dc;
}
input[type='range']::-ms-track {
cursor: pointer;
height: 0.7px;
transition: all .2s ease;
width: 100%;
background: transparent;
border-color: transparent;
border-width: 5px 0;
color: transparent;
}
input[type='range']::-ms-fill-lower {
background: #323535;
border: 2px solid #cfd8dc;
}
input[type='range']::-ms-fill-upper {
background: #484d4d;
border: 2px solid #cfd8dc;
}
input[type='range']::-ms-thumb {
box-shadow: 0 0 1px #670000, 0 0 0 #810000;
background: rgba(0, 0, 0, 0.97);
border: 0 solid #ff1e00;
border-radius: 10px;
cursor: pointer;
height: 10px;
width: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment