Created
February 10, 2015 08:40
-
-
Save g12n/f9704f10da5a5ef6558a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Range</h1> | |
<input type="range" name="points" min="-100" max="100" step="1" value="0"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.3.14) | |
// Compass (v1.0.1) | |
// ---- | |
body{color: #0af}; | |
input[type=range] { | |
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */ | |
width: 100%; /* Specific width is required for Firefox. */ | |
} | |
input[type=range]::-webkit-slider-thumb { | |
-webkit-appearance: none; | |
} | |
input[type=range]:focus { | |
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ | |
} | |
input[type=range]::-ms-track { | |
width: 100%; | |
cursor: pointer; | |
background: transparent; /* Hides the slider so custom styles can be added */ | |
border-color: transparent; | |
color: transparent; | |
} | |
/* Special styling for WebKit/Blink */ | |
input[type=range]::-webkit-slider-thumb { | |
-webkit-appearance: none; | |
border: 1px solid #000000; | |
height: 36px; | |
width: 16px; | |
border-radius: 3px; | |
background: #ffffff; | |
cursor: pointer; | |
margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */ | |
} | |
/* All the same stuff for Firefox */ | |
input[type=range]::-moz-range-thumb { | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
border: 1px solid #000000; | |
height: 36px; | |
width: 16px; | |
border-radius: 3px; | |
background: #ffffff; | |
cursor: pointer; | |
} | |
/* All the same stuff for IE */ | |
input[type=range]::-ms-thumb { | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
border: 1px solid #000000; | |
height: 36px; | |
width: 16px; | |
border-radius: 3px; | |
background: #ffffff; | |
cursor: pointer; | |
} | |
input[type=range]::-webkit-slider-runnable-track { | |
width: 100%; | |
height: 8.4px; | |
cursor: pointer; | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
background: #3071a9; | |
border-radius: 1.3px; | |
border: 0.2px solid #010101; | |
} | |
input[type=range]:focus::-webkit-slider-runnable-track { | |
background: #ddd; | |
} | |
input[type=range]::-moz-range-track { | |
width: 100%; | |
height: 8.4px; | |
cursor: pointer; | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
background: #3071a9; | |
border-radius: 1.3px; | |
border: 0.2px solid #010101; | |
} | |
input[type=range]::-ms-track { | |
width: 100%; | |
height: 8.4px; | |
cursor: pointer; | |
background: transparent; | |
border-color: transparent; | |
border-width: 16px 0; | |
color: transparent; | |
} | |
input[type=range]::-ms-fill-lower { | |
background: #2a6495; | |
border: 0.2px solid #010101; | |
border-radius: 2.6px; | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
} | |
input[type=range]:focus::-ms-fill-lower { | |
background: #3071a9; | |
} | |
input[type=range]::-ms-fill-upper { | |
background: #3071a9; | |
border: 0.2px solid #010101; | |
border-radius: 2.6px; | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
} | |
input[type=range]:focus::-ms-fill-upper { | |
background: #367ebd; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
color: #0af; | |
} | |
input[type=range] { | |
-webkit-appearance: none; | |
/* Hides the slider so that custom slider can be made */ | |
width: 100%; | |
/* Specific width is required for Firefox. */ | |
} | |
input[type=range]::-webkit-slider-thumb { | |
-webkit-appearance: none; | |
} | |
input[type=range]:focus { | |
outline: none; | |
/* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ | |
} | |
input[type=range]::-ms-track { | |
width: 100%; | |
cursor: pointer; | |
background: transparent; | |
/* Hides the slider so custom styles can be added */ | |
border-color: transparent; | |
color: transparent; | |
} | |
/* Special styling for WebKit/Blink */ | |
input[type=range]::-webkit-slider-thumb { | |
-webkit-appearance: none; | |
border: 1px solid #000000; | |
height: 36px; | |
width: 16px; | |
border-radius: 3px; | |
background: #ffffff; | |
cursor: pointer; | |
margin-top: -14px; | |
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
/* Add cool effects to your sliders! */ | |
} | |
/* All the same stuff for Firefox */ | |
input[type=range]::-moz-range-thumb { | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
border: 1px solid #000000; | |
height: 36px; | |
width: 16px; | |
border-radius: 3px; | |
background: #ffffff; | |
cursor: pointer; | |
} | |
/* All the same stuff for IE */ | |
input[type=range]::-ms-thumb { | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
border: 1px solid #000000; | |
height: 36px; | |
width: 16px; | |
border-radius: 3px; | |
background: #ffffff; | |
cursor: pointer; | |
} | |
input[type=range]::-webkit-slider-runnable-track { | |
width: 100%; | |
height: 8.4px; | |
cursor: pointer; | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
background: #3071a9; | |
border-radius: 1.3px; | |
border: 0.2px solid #010101; | |
} | |
input[type=range]:focus::-webkit-slider-runnable-track { | |
background: #ddd; | |
} | |
input[type=range]::-moz-range-track { | |
width: 100%; | |
height: 8.4px; | |
cursor: pointer; | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
background: #3071a9; | |
border-radius: 1.3px; | |
border: 0.2px solid #010101; | |
} | |
input[type=range]::-ms-track { | |
width: 100%; | |
height: 8.4px; | |
cursor: pointer; | |
background: transparent; | |
border-color: transparent; | |
border-width: 16px 0; | |
color: transparent; | |
} | |
input[type=range]::-ms-fill-lower { | |
background: #2a6495; | |
border: 0.2px solid #010101; | |
border-radius: 2.6px; | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
} | |
input[type=range]:focus::-ms-fill-lower { | |
background: #3071a9; | |
} | |
input[type=range]::-ms-fill-upper { | |
background: #3071a9; | |
border: 0.2px solid #010101; | |
border-radius: 2.6px; | |
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; | |
} | |
input[type=range]:focus::-ms-fill-upper { | |
background: #367ebd; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Range</h1> | |
<input type="range" name="points" min="-100" max="100" step="1" value="0"> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment