<html lang="en-US">
<title>Simple Range Input Slider With Output</title>
<head>
<link href='https://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>
@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
View Compiled
