Default jQEditRangeSlider

If you want to reproduce bugs on editRangeSlider !

by edwardsharp

HTML

<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSliderMouseTouch.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSliderDraggable.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSliderBar.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSliderHandle.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSliderLabel.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQEditRangeSliderLabel.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSlider.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQEditRangeSlider.js"></script>
<link rel="stylesheet" href="https://raw.github.com/ghusse/jQRangeSlider/master/css/iThing.css">
<article style="padding:50px">
<div id="slider"></div>
    <div id="slider02"></div>
    <div id="slider03"></div>
</article>

CSS

/**
 * Theme for jQRangeSlider
 * Inspired by http://cssdeck.com/item/381/itunes-10-storage-bar
 *        and http://cssdeck.com/item/276/pure-css-arrow-with-border-tooltip
 */

.ui-rangeSlider-withArrows .ui-rangeSlider-container{
  margin: 0 15px;
  -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
  -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
  box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
}

.ui-rangeSlider-noArrow .ui-rangeSlider-container{
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-left: solid 1px #515862;
  border-right: solid 1px #515862;

  -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
  -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
  box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
}

.ui-rangeSlider-container{
     height: 30px;
  border-top: solid 1px #232a32;
  border-bottom: solid 1px #6a7179;
  background: #67707F;
  background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0));
}


.ui-rangeSlider-arrow{
  width:14px;
  height:30px;
  border-top: solid 1px #232a32;
  border-bottom: solid 1px #6a7179;
  background: #67707F;
  cursor:pointer;

  box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
  -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
  -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
  background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0));
}

.ui-rangeSlider-leftArrow{
  border-radius:4px 0 0 4px;
  border-left: solid 1px #515862;
}

.ui-rangeSlider-rightArrow{
  border-radius:0 4px 4px 0;
  border-right: solid 1px #515862;
}

.ui-rangeSlider-arrow-inner{
  position: absolute;
  top: 50%;
  border: 10px solid transparent;
  width:0;
  height:0;

  margin-top: -10px;
}

.ui-rangeSlider-leftArrow...

JavaScript

$("#slider").rangeSlider({
});
$("#slider02").editRangeSlider({
});

$("#slider03").editRangeSlider({
});


$("#slider").rangeSlider({
  bounds: {min: 0, max: 100}
});
// Change options after slider creation
$("#slider").rangeSlider("option", "bounds", {min: 10, max: 90});
// Get option value
var bounds = $("#slider").rangeSlider("option", "bounds", {min: 60, max: 70});
// Set date option
$("#dateSlider").dateRangeSlider(
  "option",
  "bounds",
  {
    min: new Date(2012, 0, 1),
    max: new Date(2012, 11, 31)  
});