JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<script src="http://loopj.com/jquery-simple-slider/js/simple-slider.js"></script>  
  <input id="Amount" type="text" data-slider-range="0,1000" data-slider-step="5" data-slider="false"  value="5" data-slider-highlight="true" />
   
 <span id="cost"> </span>
 <input id="addVal"  type="button" value="Click Me" />

CSS

.slider {
    width: 80%;
}
.slider > .dragger {
  width:25px; height:25px;
    background: #cb52e8;
    background: -webkit-linear-gradient(top, #cb52e8, #72A307);
    background: -moz-linear-gradient(top, #cb52e8, #72A307);
    background: linear-gradient(top, #cb52e8, #72A307);
    -webkit-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 20px; 
  
    color:white;
    text-align:center;
}
.slider > .dragger  {
    line-height:80px; 
}
.slider > .dragger {
    background: -webkit-linear-gradient(top, #cb52e8, #cb52e8);transition: all .5s linear
}
.slider{ pointer-events: none; }
.slider > .track, .slider > .highlight-track {
    background: #cb52e8;
    background: -webkit-linear-gradient(top, #bbb, #ddd);
    background: -moz-linear-gradient(top, #bbb, #ddd);
    background: linear-gradient(top, #bbb, #ddd);
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #aaa;
    height: 4px;transition: all .5s linear
}
.slider > .highlight-track {
    background-color: #cb52e8;
    background: -webkit-linear-gradient(top, #cb52e8, pink);
    background: -moz-linear-gradient(top, #cb52e8, pink);
    background: linear-gradient(top, #cb52e8, pink);
    border-color: #cb52e8;
}
#cost{display:block; margin:50px 0}

JavaScript

//Add Value to slider button
$("#addVal").click( function (event, data) {
   var  cost = parseInt($('#Amount').attr('value')),newCost = parseInt(cost + (200)) ;
     
  $('#Amount').attr('value', newCost)
   
  if(newCost >2000 ){$('#cost').html('Wow Need To Chat')}else{
  $('#cost').html( newCost)
  var move = (newCost/2000)*100;
  $('.highlight-track').css({'width': move+'%'})
  $('.dragger').css({'left': move+'%'})
	}   
})