Skip to content

Instantly share code, notes, and snippets.

@tow8ie

tow8ie/SassMeister-input-HTML.html

Created November 19, 2015 17:16
Show Gist options
  • Save tow8ie/ce13ff5890fe670b5dd1 to your computer and use it in GitHub Desktop.
Save tow8ie/ce13ff5890fe670b5dd1 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div id="panel">
<input class="teasd-range-slider" type="range" min="100" max="500" step="10" />
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
// Created with http://danielstern.ca/range.css
#panel {
padding: 30px;
background-color: #313233;
}
input[type=range].teasd-range-slider {
-webkit-appearance: none;
width: 100%;
margin: 8px 0;
background-color: transparent;
}
input[type=range].teasd-range-slider:focus {
outline: none;
}
input[type=range].teasd-range-slider::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
background: #4d4d4d;
border-radius: 2.2px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range].teasd-range-slider::-webkit-slider-thumb {
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
border: 0px solid rgba(0, 0, 0, 0);
height: 20px;
width: 20px;
border-radius: 20px;
background: #dddddd;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8px;
}
input[type=range].teasd-range-slider:focus::-webkit-slider-runnable-track {
background: #4d4d4d;
}
Raw
SassMeister-output.css
#panel {
padding: 30px;
background-color: #313233;
}
input[type=range].teasd-range-slider {
-webkit-appearance: none;
width: 100%;
margin: 8px 0;
background-color: transparent;
}
input[type=range].teasd-range-slider:focus {
outline: none;
}
input[type=range].teasd-range-slider::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
box-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(13, 13, 13, 0);
background: #4d4d4d;
border-radius: 2.2px;
border: 0px solid transparent;
}
input[type=range].teasd-range-slider::-webkit-slider-thumb {
box-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(13, 13, 13, 0);
border: 0px solid transparent;
height: 20px;
width: 20px;
border-radius: 20px;
background: #dddddd;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8px;
}
input[type=range].teasd-range-slider:focus::-webkit-slider-runnable-track {
background: #4d4d4d;
}
Raw
SassMeister-rendered.html
<div id="panel">
<input class="teasd-range-slider" type="range" min="100" max="500" step="10" />
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment