Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 8, 2018 15:48
Show Gist options
  • Save anonymous/2fb74b8d170b457437e0fa679a7b6564 to your computer and use it in GitHub Desktop.
Save anonymous/2fb74b8d170b457437e0fa679a7b6564 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/vijosojile
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-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;
height: 10px;
margin-top: -4.65px;
}
</style>
</head>
<body>
<input type="range">
<script id="jsbin-source-css" type="text/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;
height: 10px;
margin-top: -4.65px;
}
</script>
</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;
height: 10px;
margin-top: -4.65px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment