Skip to content

Instantly share code, notes, and snippets.

@kuoe0

kuoe0/semantic-ui-style-range-input.html

Last active July 6, 2016 03:22
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kuoe0/8346849 to your computer and use it in GitHub Desktop.
Save kuoe0/8346849 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
semantic-ui-style-range-input.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>semantic-slider</title>
<style>
.ui.slider.range input[type="range"] {
-webkit-appearance: none;
border-width: 1px;
border-style: solid;
border-radius: 50rem;
border-color: rgba(0, 0, 0, 0.1);
padding: 3px 5px;
}
.ui.slider.range input[type="range"]::-moz-range-track {
background: none;
border: none;
}
.ui.slider.range input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background: #89B84C;
border-radius: 50rem;
height: 0.7em;
width: 0.7em;
}
.ui.slider.range input[type="range"]::-moz-range-thumb {
background: #89B84C;
border-color: #89B84C;
border-radius: 50rem;
height: 0.7em;
width: 0.7em;
}
</style>
</head>
<body>
<div class="ui slider range">
<input type="range" />
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment