Skip to content

Instantly share code, notes, and snippets.

@mihaisavezi

mihaisavezi/UI Range Slider.markdown

Created March 7, 2016 09:30
Show Gist options
  • Save mihaisavezi/ecea9488375dfcb8fc11 to your computer and use it in GitHub Desktop.
Save mihaisavezi/ecea9488375dfcb8fc11 to your computer and use it in GitHub Desktop.
Download ZIP
UI Range Slider
Raw
index.html
<html lang="en-US">
<title>Simple Range Input Slider With Output</title>
<head>
<link href='http://fonts.googleapis.com/css?family=Quantico' rel='stylesheet' type='text/css'>
</head>
<div class="container">
<div class="slider">
<input type = "range" min="0" max="100" onchange="rangevalue.value=value"/>
<output id="rangevalue">50</output>
</div>
</div>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
Raw
style.css
@import compass
$green: #A3CD99
$darkgreen: #579E81
body
background:
color: lighten($green, 25%)
.container
display: flex
width: 500px
height: 500px
margin: auto
text-alignt: center
.slider
width: 100%
margin: 50% auto
input[type="range"]
-webkit-appearance: none !important /*Needed to reset default slider styles */
width: 100%
height: 15px
background:
color: $green
border: 1px solid darken($green, 4%)
radius: 10px
margin: auto
transition: all 0.3s ease
&:hover
background-color: lighten($green, 5%)
&:active + #rangevalue /*Here to do something to the value while moving the slider */
input[type="range"]::-webkit-slider-thumb
-webkit-appearance: none !important
width: 20px
height: 20px
background:
color: $darkgreen
border:
radius: 30px
box-shadow: 0px 0px 3px darken($darkgreen, 15%)
transition: all 0.5s ease
&:hover
background:
color: darken($darkgreen, 10%)
&:active
box-shadow: 0px 0px 1px darken($darkgreen, 15%)
#rangevalue
text-align: center
font:
family: 'Quantico', sans-serif
size: 18px
display: block
margin: auto
padding: 10px 0px
width: 100%
color: $darkgreen
Raw
styles
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
Raw
UI Range Slider.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment