<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

External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js