JSFiddle - React, Tailwind, and code Playground

by erickeno

HTML

<script src="http://loopj.com/jquery-simple-slider/js/simple-slider.js"></script>
<link rel="stylesheet" href="http://loopj.com/jquery-simple-slider/css/simple-slider.css">
Percentage Sliders<br><br>
<input type="tex" class="slida" type="text" data-slider="true" data-slider-range="0,100" data-slider-step="25" data-slider-snap="true" data-slider-theme="volume" >
<br><br>

<input type="tex" class="slida" type="text" data-slider="true" data-slider-range="0,100" data-slider-step="25" data-slider-snap="true" data-slider-theme="volume" >

CSS

.slider-volume {
  width: 300px;
}

.slider-volume > .dragger {
	width: 16px;
	height: 16px;
	margin: 0 auto;
  border: 1px solid  #000;

  background: yellow;
}

.slider-volume > .track, .slider-volume > .highlight-track {
  height: 11px;

  background: #000;
  /*background: -moz-linear-gradient(top, #787878, #a2a2a2);
  background: -webkit-linear-gradient(top, #787878, #a2a2a2);
  background: linear-gradient(top, #787878, #a2a2a2);*/

  -moz-box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);
  box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.slider-volume > .highlight-track {
  background-color: #c5c5c5;
  background: -moz-linear-gradient(top, #c5c5c5, #a2a2a2);
  background: -webkit-linear-gradient(top, #c5c5c5, #a2a2a2);
  background: linear-gradient(top, #c5c5c5, #a2a2a2);
}

JavaScript

$(".slida").bind("slider:changed", function (event, data) {
    console.log("Changed Value: ", data.value);
    $(this).each(function() {
        total = 0;
    $(this).each(function() {
        total +=;    
    });     
  });  
  console.log("TOTAL: ", total)

});
// end