Skip to content

Instantly share code, notes, and snippets.

@joyrexus

joyrexus/README.md

Created December 19, 2013 06:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joyrexus/8035222 to your computer and use it in GitHub Desktop.
Save joyrexus/8035222 to your computer and use it in GitHub Desktop.
Download ZIP
Stylized range slider template
Raw
README.md

Template for a stylized range input slider.

See this article for details on styling options.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
output {
font-family: 'Helvetica Neue';
font-weight: 300;
font-size: 40px;
color: #777;
}
input[type=range] {
-webkit-appearance: none;
background-color: #C8C8C8;
width: 500px;
height: 25px;
margin: 20px;
}
::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #777;
width: 30px;
height: 25px;
}
</style>
<body>
<input type=range id=slider min=1 max=2000 value=1 step=1>
<output for=slider id=current>1</output>
<script>
setOutput = function() {
return current.value = slider.value;
};
slider.addEventListener('input', setOutput);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment