.-.-.-.-.-

tpl/index.tpl000064400000112016151676726750007222 0ustar00<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Examples for bootstrap-slider plugin">
    <meta name="author" content="">

<title>Slider for Bootstrap Examples Page</title>

<link href="<%= css.bootstrap %>" rel="stylesheet">
    <link href="<%= css.slider %>" rel="stylesheet">
    
    <link href="<%= css.highlightjs %>" rel="stylesheet">
    
    <style type='text/css'>

/* Space out content a bit */
			body {
			  padding-top: 20px;
			  padding-bottom: 20px;
			}

h1 small {
				font-size: 51%;
			}

/* Everything but the jumbotron gets side spacing for mobile first views */
			.header,
			.marketing,
			.footer {
			  padding-left: 15px;
			  padding-right: 15px;
			}

/* Custom page header */
			.header {
			  border-bottom: 1px solid #e5e5e5;
			}
			/* Make the masthead heading the same height as the navigation */
			.header h3 {
			  margin-top: 0;
			  margin-bottom: 0;
			  line-height: 40px;
			  padding-bottom: 19px;
			}

/* Custom page footer */
			.footer {
			  padding-top: 19px;
			  color: #777;
			  border-top: 1px solid #e5e5e5;
			}

/* Customize container */
			.container {
				min-width: 640px;
			}
			@media (min-width: 768px) {
			  .container {
			    max-width: 1000px;
			  }
			}
			.container-narrow > hr {
			  margin: 30px 0;
			}

/* Main marketing message and sign up button */
			.title {
			  text-align: center;
			  border-bottom: 1px solid #e5e5e5;
			}

/* Responsive: Portrait tablets and up */
			@media screen and (min-width: 768px) {
			  /* Remove the padding we set earlier */
			  .header,
			  .footer {
			    padding-left: 0;
			    padding-right: 0;
			  }
			  /* Space out the masthead */
			  .header {
			    margin-bottom: 30px;
			  }
			  /* Remove the bottom border on the jumbotron for visual effect */
			  .title {
			    border-bottom: 0;
			  }
			}

.well {
				background-color: #E0E0E0;
			}

.slider-example {
				padding-top: 10px;
				padding-bottom: 55px;
				margin: 35px 0;
			}

#destroyEx5Slider, #ex6CurrentSliderValLabel, #ex7-enabled {
				margin-left: 45px;
			}

#ex6SliderVal {
				color: green;
			}

#slider12a .slider-track-high, #slider12c .slider-track-high {
				background: green;
			}

#slider12b .slider-track-low, #slider12c .slider-track-low {
				background: red;
			}

#slider12c .slider-selection {
				background: yellow;
			}

#slider22 .slider-selection {
				background: #2196f3;
			}

#slider22 .slider-rangeHighlight {
				background: #f70616;
			}
        
			#slider22 .slider-rangeHighlight.category1 {
				background: #FF9900;
			}
        
			#slider22 .slider-rangeHighlight.category2 {
				background: #99CC00;
			}

</style>

/* Example 3 custom styles */
			#RGB {
    		height: 20px;
    		background: rgb(128, 128, 128);
  		}
			#RC .slider-selection {
			    background: #FF8282;
			}
			#RC .slider-handle {
				background: red;
			}
			#GC .slider-selection {
				background: #428041;
			}
			#GC .slider-handle {
				background: green;
			}
			#BC .slider-selection {
				background: #8283FF;
			}
			#BC .slider-handle {
				border-bottom-color: blue;
			}
			#R, #G, #B {
				width: 300px;
			}
    </style>
	<script type='text/javascript' src="<%= js.modernizr %>"></script>
    
    
    
  </head>

<body>

<div class="jumbotron">
        <h1>Slider for Bootstrap <small>bootstrap-slider.js</small></h1>
        <p class="lead">Examples for the <a target="_blank" href="https://github.com/seiyria/bootstrap-slider">bootstrap-slider</a> component.<p>
      </div>

<div class="examples">
      	<div id="example-1" class='slider-example'>
      		<h3>Example 1:</h3>
      		<p>Basic example with custom formatter and colored selected region via CSS.</p>
      		<div class="well">
				<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
			</div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$('#ex1').slider({
	formatter: function(value) {
		return 'Current value: ' + value;
	}
});

// Without JQuery
var slider = new Slider('#ex1', {
	formatter: function(value) {
		return 'Current value: ' + value;
	}
});
</code></pre>

<h5>CSS</h5>
<pre><code class="css">
#ex1Slider .slider-selection {
	background: #BABABA;
}
</code></pre>
      	</div>

<div id="example-2" class='slider-example'>
      		<h3>Example 2:</h3>
      		<p>Range selector, options specified via data attribute.</p>
      		<div class="well">
      			Filter by price interval: <b>€ 10</b> <input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> <b>€ 1000</b>
      		</div>
<h5>HTML</h5>
<pre><code class="html">
Filter by price interval: &ltb&gt€ 10&lt/b&gt &ltinput id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/&gt &ltb&gt€ 1000&lt/b&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex2").slider({});

// Without JQuery
var slider = new Slider('#ex2', {});
</code></pre>
      	</div>

<div id="example-3" class='slider-example'>
      		<h3>Example 3:</h3>
      		<p>Using events to work with the values and style the selection and handles via CSS. The tooltip is disabled and diferent shapes for the handles.</p>
      		<div class="well">
      			<p>
	        	<b>R</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="RC" id="R" data-slider-tooltip="hide" data-slider-handle="square" />
	            </p>
	            <p>
	            <b>G</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="GC" id="G" data-slider-tooltip="hide" data-slider-handle="round" />
	            </p>
	            <p>
	            <b>B</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="triangle" />
	            </p>
	            <div id="RGB"></div>
      		</div>
<h5>HTML</h5>
<pre><code class="html">
&ltp&gt
&ltb&gtR&lt/b&gt &ltinput type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="RC" id="R" data-slider-tooltip="hide" data-slider-handle="square" /&gt
&lt/p&gt
&ltp&gt
&ltb&gtG&lt/b&gt &ltinput type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="GC" id="G" data-slider-tooltip="hide" data-slider-handle="round" /&gt
&lt/p&gt
&ltp&gt
&ltb&gtB&lt/b&gt &ltinput type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="triangle" /&gt
&lt/p&gt
&ltdiv id="RGB"&gt&lt/div&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
var RGBChange = function() {
	$('#RGB').css('background', 'rgb('+r.getValue()+','+g.getValue()+','+b.getValue()+')')
};

<h5>CSS</h5>
<pre><code class="css">
#RGB {
	height: 20px;
	background: rgb(128, 128, 128);
}
#RC .slider-selection {
	background: #FF8282;
}
#RC .slider-handle {
	background: red;
}
#GC .slider-selection {
	background: #428041;
}
#GC .slider-handle {
	background: green;
}
#BC .slider-selection {
	background: #8283FF;
}
#BC .slider-handle {
	border-bottom-color: blue;
}
#R, #G, #B {
	width: 300px;
}
</code></pre>
      	</div>

<div id="example-4" class='slider-example'>
      		<h3>Example 4:</h3>
      		<p>Vertical Slider with reversed values (largest to smallest).</p>
      		<div class="well">
      			<input id="ex4" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical"/>
      		</div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex4" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical"/&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex4").slider({
	reversed : true
});

// Without JQuery
var slider = new Slider("#ex4", {
	reversed : true
});
</code></pre>
      	</div>

<div id="example-5" class='slider-example'>
      		<h3>Example 5:</h3>
      		<p>Destroy instance of slider by calling destroy() method on slider instance via JavaScript.
      		<div class="well">
      			<input id="ex5" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="0"/>
      			<button id="destroyEx5Slider" class='btn btn-danger'>Click to Destroy</button>
      		</div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex5" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="0"/&gt
&ltbutton id="destroyEx5Slider" class='btn btn-danger'>Click to Destroy&lt/button&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex5").slider();

// Without JQuery
var slider = new Slider('#ex5');

$("#destroyEx5Slider").click(function() {

// With JQuery
	$("#ex5").slider('destroy');

// Without JQuery
	slider.destroy();
});
</code></pre>
      	</div>

<div id="example-6" class='slider-example'>
      		<h3>Example 6:</h3>
      		<p>Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used.</p>
      		<div class="well">
      			<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
      			<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
      		</div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/&gt
&ltspan id="ex6CurrentSliderValLabel">Current Slider Value: &ltspan id="ex6SliderVal"&gt3&lt/span&gt&lt/span&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
	$("#ex6SliderVal").text(slideEvt.value);
});

// Without JQuery
var slider = new Slider("#ex6");
slider.on("slide", function(sliderValue) {
	document.getElementById("ex6SliderVal").textContent = sliderValue;
});
</code></pre>

</code></pre>
      	</div>

<div id="example-7" class='slider-example'>
      		<h3>Example 7:</h3>
      		<p>Sliders can be enabled and disabled.</p>
      		<div class="well">
      			<input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
      			<input id="ex7-enabled" type="checkbox"/> Enabled
      		</div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/&gt
&ltinput id="ex7-enabled" type="checkbox"/&gt Enabled
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex7").slider();

// Without JQuery
var slider = new Slider("#ex7");

$("#ex7-enabled").click(function() {
	if(this.checked) {
		// With JQuery
		$("#ex7").slider("enable");

// Without JQuery
		slider.enable();
	}
	else {
		// With JQuery
		$("#ex7").slider("disable");

// Without JQuery
		slider.disable();
	}
});
</code></pre>
      	</div>

<div id="example-8" class='slider-example'>
      		<h3>Example 8:</h3>
      		<p>Tooltip can always be displayed.</p>
      		<div class="well">
  				<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
      		</div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex8").slider({
	tooltip: 'always'
});

// Without JQuery
var slider = new Slider("#ex8", {
	tooltip: 'always'
});
</code></pre>
      	</div>

<div id="example-9" class='slider-example'>
      		<h3>Example 9:</h3>
      		<p>Precision (number of places after the decimal) can be specified.</p>
      		<div class="well">
  				<input id="ex9" type="text"/>
      		</div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex9" type="text"/&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex9").slider({
	precision: 2,
	value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
});

// Without JQuery
var slider = new Slider("#ex9", {
	precision: 2,
	value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
});
</code></pre>
      	</div>
<div id="example-10" class='slider-example'>
    <h3>Example 10:</h3>
    <p>Setting custom handlers.</p>
    <div class="well">
    <input id="ex10" type="text" data-slider-handle="custom"/>
    </div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex10" type="text" data-slider-handle="custom"/&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex10").slider({});

// Without JQuery
var slider = new Slider("#ex10", {});
</code></pre>

<h5>CSS</h5>
<pre><code class="css">
.slider-handle.custom {
	background: transparent none;
	/* You can customize the handle and set a background image */
}

/* Or display content like unicode characters or fontawesome icons */
.slider-handle.custom::before {
	line-height: 20px;
	font-size: 20px;
	content: '\2605'; /*unicode star character*/
	color: #726204;
}
</code></pre>
  </div>

<div id="example-11" class='slider-example'>
      <h3>Example 11:</h3>
      <p>Using a custom step interval.</p>
      <div class="well">
      <input id="ex11" type="text" data-slider-handle="custom"/>
      </div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex11" type="text" data-slider-handle="custom"/&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex11").slider({step: 20000, min: 0, max: 200000});

// Without JQuery
var slider = new Slider("#ex11", {
	step: 20000,
	min: 0,
	max: 200000
});
</code></pre>
  </div>

<div id="example-12" class='slider-example'>
    <h3>Example 12:</h3>
    <p>Coloring the low and high track segments.</p>
	<div class="well">
      Single-value slider, high track:<br/>
      <input id="ex12a" type="text"/><br/>
      Note that there is no low track on the single-value slider.  The
      area lesser than the value of the handle is the selection.
      <br/><br/>
      Range slider, low track:<br/>
      <input id="ex12b" type="text"/>
      <br/><br/>
      Range slider, low and high tracks, and selection:<br/>
      <input id="ex12c" type="text"/>
    </div>
<h5>HTML</h5>
<pre><code class="html">
&lt;!-- Single-value slider, high track: --&gt;
&ltinput id="ex12a" type="text"/&gt&ltbr/&gt
Note that there is no low track on the single-value slider. The area to lesser than the value of the handle is the selection.

&lt;!-- Range slider, low track: --&gt;
&ltinput id="ex12b" type="text"/&gt&ltbr/&gt

&lt;!-- Range slider, low and high tracks, and selection: --&gt;
&ltinput id="ex12c" type="text"/&gt&ltbr/&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex12a").slider({ id: "slider12a", min: 0, max: 10, value: 5 });
$("#ex12b").slider({ id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] });
$("#ex12c").slider({ id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] });

// Without JQuery
var sliderA = new Slider("#ex12a", { id: "slider12a", min: 0, max: 10, value: 5 });
var sliderB = new Slider("#ex12b", { id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] });
var sliderC = new Slider("#ex12c", { id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] });
</code></pre>

<h5>CSS</h5>
<pre><code class="css">
#slider12a .slider-track-high, #slider12c .slider-track-high {
	background: green;
}

#slider12b .slider-track-low, #slider12c .slider-track-low {
	background: red;
}

#slider12c .slider-selection {
	background: yellow;
}
</code></pre>
  </div>

<div id="example-13" class='slider-example'>
      <h3>Example 13:</h3>
      <p>Using tick marks and labels.</p>
      <div class="well">
      <input id="ex13" type="text"/>
      </div>
<h5>HTML</h5>
<pre><code class="html">
&lt;input id="ex13" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'/&gt;
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex13").slider({
    ticks: [0, 100, 200, 300, 400],
    ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
    ticks_snap_bounds: 30
});

// Without JQuery
var slider = new Slider("#ex13", {
    ticks: [0, 100, 200, 300, 400],
    ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
    ticks_snap_bounds: 30
});

</code></pre>
  </div>

<div id="example-14" class='slider-example'>
      <h3>Example 14:</h3>
      <p>Using tick marks at specific positions..</p>
      <div class="well">
      <input id="ex14" type="text"/>
      </div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex14" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]' data-slider-ticks-positions="[0, 30, 70, 90, 100]" /&gt
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex14").slider({
    ticks: [0, 100, 200, 300, 400],
    ticks_positions: [0, 30, 70, 90, 100],
    ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
    ticks_snap_bounds: 30
});

// Without JQuery
var slider = new Slider("#ex14", {
    ticks: [0, 100, 200, 300, 400],
    ticks_positions: [0, 30, 70, 90, 100],
    ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
    ticks_snap_bounds: 30
});
</code></pre>
	</div>

<div id="example-15" class='slider-example'>
      		<h3>Example 15:</h3>
      		<p>With a logarithmic scale.</p>
      		<div class="well">
						<input id="ex15" type="text" data-slider-min="1000" data-slider-max="10000000" data-slider-step="5" />
      		</div>
<h5>HTML</h5>
<pre><code class="html">
&lt;input id="ex15" type="text" data-slider-min="1000" data-slider-max="10000000" data-slider-step="5" /&gt;
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex15").slider({
	min: 1000,
	max: 10000000,
	scale: 'logarithmic',
	step: 10
});

// Without JQuery
var slider = new Slider('#ex15', {
	min: 1000,
	max: 10000000,
	scale: 'logarithmic',
	step: 10
});
</code></pre>

</div>

<div id="example-16" class="slider-example">
        <h3>Example 16:</h3>
        <p>Focus the slider handle after a value change.</p>
        <div class="well">
          Single-value slider:<br/>
          <input id="ex16a" type="text"/><br/>
          <br/><br/>
          Range slider:<br/>
          <input id="ex16b" type="text"/>
        </div>
<h5>HTML</h5>
<pre><code class="html">
&lt;!-- Single-value slider: --&gt;
&ltinput id="ex16a" type="text"/&gt&ltbr/&gt

&lt;!-- Range slider: --&gt;
&ltinput id="ex16b" type="text"/&gt&ltbr/&gt
Note that the slider handle that caused the value change is focused.
</code></pre>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex16a").slider({ min: 0, max: 10, value: 0, focus: true });
$("#ex16b").slider({ min: 0, max: 10, value: [0, 10], focus: true });

// Without JQuery
var sliderA = new Slider("#ex16a", { min: 0, max: 10, value: 0, focus: true });
var sliderB = new Slider("#ex16b", { min: 0, max: 10, value: [0, 10], focus: true });
</code></pre>
      </div>

<div id="example-17" class="slider-example">
      		<h3>Example 17:</h3>
      		<p>Unusual tooltip positions</p>

<div class="well">
      			Horizontal slider with tooltip on the bottom<br/><br/>
      			<input id="ex17a" type="text"/><br/><br/><br/>

Vertical slider with tooltip on the left<br/><br/>
      			<input id="ex17b" type="text"/>
      		</div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex17a" type="text"/&gt
&ltinput id="ex17b" type="text"/&gt
</code></pre>

<h5>JS</h5>
<pre><code class="js">
// With JQuery
$("#ex17a").slider({
	min: 0,
	max: 10,
	value: 0,
	tooltip_position:'bottom'
});
$("#ex17b").slider({
	min: 0,
	max: 10,
	value: 0,
	orientation: 'vertical',
	tooltip_position:'left'
});

// Without JQuery
var sliderA = new Slider("#ex17a", {
	min: 0,
	max: 10,
	value: 0,
	tooltip_position:'bottom'
});

var sliderB = new Slider("#ex17b", {
	min: 0,
	max: 10,
	value: 0,
	orientation: 'vertical',
	tooltip_position:'left'
});
</code></pre>

</div>

<div id="example-18" class="slider-example">
        <h3>Example 18:</h3>
        <p>Accessibility with ARIA labels</p>

<div class="well">
          Slider with single value and label:<br/><br/>
          <span id="ex18-label-1" class="hidden">
            Example slider label
          </span>
          <input id="ex18a" type="text" /><br/><br/><br/>

Range slider with multiple labels:<br/><br/>
          <span id="ex18-label-2a" class="hidden">
            Example low value
          </span>
          <span id="ex18-label-2b" class="hidden">
            Example high value
          </span>
          <input id="ex18b" type="text" />
        </div>
<h5>HTML</h5>
<pre><code class="html">
&lt;span id="ex18-label-1" class="hidden"&gt;Example slider label&lt;/span&gt;
&lt;input id="ex18a" type="text"/&gt;

&lt;span id="ex18-label-2a" class="hidden"&gt;Example low value&lt;/span&gt;
&lt;span id="ex18-label-2b" class="hidden"&gt;Example high value&lt;/span&gt;
&lt;input id="ex18b" type="text"/&gt;
</pre></code>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex18a").slider({
	min: 0,
	max: 10,
	value: 5,
	labelledby: 'ex18-label-1'
});
$("#ex18b").slider({
	min: 0,
	max: 10,
	value: [3, 6],
	labelledby: ['ex18-label-2a', 'ex18-label-2b']
});

// Without JQuery
var sliderA = new Slider("#ex18a", {
	min: 0,
	max: 10,
	value: 5,
	labelledby: 'ex18-label-1'
});
var sliderB = new Slider("#ex18b", {
	min: 0,
	max: 10,
	value: [3, 6],
	labelledby: ['ex18-label-2a', 'ex18-label-2b']
});
</pre></code>
      </div>

<div  id="example-19" class="slider-example">
        <h3>Example 19:</h3>
        <p>Auto-Register data-provide="slider" Elements</p>

<div class="well">
          Slider-Element not accompanied by any custom Javascript:<br/><br/>
          <span id="ex18-label-1" class="hidden">
            Example slider label
          </span>
          <input id="ex19" type="text"
                data-provide="slider"
                data-slider-ticks="[1, 2, 3]"
                data-slider-ticks-labels='["short", "medium", "long"]'
                data-slider-min="1"
                data-slider-max="3"
                data-slider-step="1"
                data-slider-value="3"
                data-slider-tooltip="hide" />
        </div>
<h5>HTML</h5>
<pre><code class="html">
 &lt;span id="ex18-label-1" class="hidden">Example slider label&lt;/span&gt;
        &lt;input id="ex19" type="text"
              data-provide="slider"
              data-slider-ticks="[1, 2, 3]"
              data-slider-ticks-labels='["short", "medium", "long"]'
              data-slider-min="1"
              data-slider-max="3"
              data-slider-step="1"
              data-slider-value="3"
              data-slider-tooltip="hide" /&gt;
</pre></code>
      </div>

<div  id="example-20" class="slider-example">
        <h3>Example 20:</h3>
        <p>Slider-Elements initially hidden</p>

<a class="btn btn-primary" href="" id="ex20a">Show</a>
        <br><br>
        <div class="well" style="display: none">
          Slider-Element initially hidden, revealed by Javascript:<br/><br/>
          <span id="ex18-label-1" class="hidden">
            Example slider label
          </span>
          <input id="ex20" type="text"
                data-provide="slider"
                data-slider-ticks="[1, 2, 3]"
                data-slider-ticks-labels='["short", "medium", "long"]'
                data-slider-min="1"
                data-slider-max="3"
                data-slider-step="1"
                data-slider-value="3"
                data-slider-tooltip="hide" />
        </div>
<h5>HTML</h5>
<pre><code class="html">
 &lt;a class="btn btn-primary" href="" id="ex20a">Show&lt;/a&gt;
        &lt;div class="well" style="display: none"&gt;
            &lt;span id="ex18-label-1" class="hidden"&gt;Example slider label&lt;/span&gt;
            &lt;input id="ex19" type="text"
                  data-provide="slider"
                  data-slider-ticks="[1, 2, 3]"
                  data-slider-ticks-labels='["short", "medium", "long"]'
                  data-slider-min="1"
                  data-slider-max="3"
                  data-slider-step="1"
                  data-slider-value="3"
                  data-slider-tooltip="hide" /&gt;
        &lt;/div&gt;
</pre></code>

<h5>JavaScript</h5>
<pre><code class="js">
 $('#ex20a').on('click', function(e) {
      $('#ex20a')
          .parent()
          .find(' >.well')
          .toggle()
          .find('input')
          .slider('relayout');
      e.preventDefault();
  });
</pre></code>
      </div>

<div id="example-21" class="slider-example">
        <h3>Example 21:</h3>
        <p>Create an input element with the <strong>data-provide="slider"</strong> attribute automatically turns it into a slider. Options can be supplied via <strong>data-slider-</strong> attributes.</p>

<div class="well">
	      	<input id="ex21" type="text"
	           data-provide="slider"
	           data-slider-ticks="[1, 2, 3]"
	           data-slider-ticks-labels='["short", "medium", "long"]'
	           data-slider-min="1"
	           data-slider-max="3"
	           data-slider-step="1"
	           data-slider-value="3"
	           data-slider-tooltip="hide" />
        </div>
<h5>HTML</h5>
<pre><code class="html">
 &lt;input id="ex21" type="text"
          data-provide="slider"
          data-slider-ticks="[1, 2, 3]"
          data-slider-ticks-labels='["short", "medium", "long"]'
          data-slider-min="1"
          data-slider-max="3"
          data-slider-step="1"
          data-slider-value="3"
          data-slider-tooltip="hide" /&gt;
</pre></code>
      </div>

<div id="example-22" class="slider-example">
		  <h3>Example 22:</h3>
		  <p>Highlight ranges on slider with <strong>rangeHighlights</strong> attribute</p>

<div class="well">
			  <input id="ex22" type="text"
					 data-slider-id="slider22"
					 data-slider-min="0"
					 data-slider-max="20"
					 data-slider-step="1"
					 data-slider-value="14"
					 data-slider-rangeHighlights='[{ "start": 2, "end": 5, "class": "category1" },
					                               { "start": 7, "end": 8, "class": "category2" },
					                               { "start": 17, "end": 19 },
					                               { "start": 17, "end": 24 },
					                               { "start": -3, "end": 19 }]'/>
		  </div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex22" type="text"
     data-slider-id="slider22"
     data-slider-min="0"
     data-slider-max="20"
     data-slider-step="1"
     data-slider-value="14"
     data-slider-rangeHighlights='[{ "start": 2, "end": 5, "class": "category1" },
                                   { "start": 7, "end": 8, "class": "category2" },
                                   { "start": 17, "end": 19 },
                                   { "start": 17, "end": 24 }, //not visible -  out of slider range
                                   { "start": -3, "end": 19 }]' /&gt;
</pre></code>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$('#ex22').slider({
    id: 'slider22',
    min: 0,
    max: 20,
    step: 1,
    value: 14,
    rangeHighlights: [{ "start": 2, "end": 5, "class": "category1" },
                      { "start": 7, "end": 8, "class": "category2" },
                      { "start": 17, "end": 19 },
                      { "start": 17, "end": 24 },
                      { "start": -3, "end": 19 }]});

// Without JQuery
var slider = new Slider("#ex22", {
    id: 'slider22',
    min: 0,
    max: 20,
    step: 1,
    value: 14,
    rangeHighlights: [{ "start": 2, "end": 5, "class": "category1" },
                      { "start": 7, "end": 8, "class": "category2" },
                      { "start": 17, "end": 19 },
                      { "start": 17, "end": 24 },
                      { "start": -3, "end": 19 }]});
</pre></code>

<h5>CSS</h5>
<pre><code class="css">
#slider22 .slider-selection {
	background: #81bfde;
}

#slider22 .slider-rangeHighlight {
	background: #f70616;
}

#slider22 .slider-rangeHighlight.category1 {
    background: #FF9900;
}

#slider22 .slider-rangeHighlight.category2 {
    background: #99CC00;
}

</pre></code>
	  </div>

<div id="example-23" class='slider-example'>
		<h3>Example 23:</h3>
		<p>Using tick marks at specific positions..</p>
		<div class="well">
		<input id="ex23" type="text"/>
		</div>
<h5>HTML</h5>
<pre><code class="html">
&ltinput id="ex23" type="text" data-slider-ticks="[0, 1, 2, 3, 4]" data-slider-step="0.01" data-slider-ticks-snap-bounds="200" data-slider-ticks-tooltip="true" ticks_positions="[0, 30, 60, 70, 90, 100]" /&gt
</pre></code>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex23").slider({
    ticks: [0, 1, 2, 3, 4],
    ticks_positions: [0, 30, 60, 70, 90, 100],
    ticks_snap_bounds: 200,
	formatter: function(value) {
		return 'Current value: ' + value;
	},
	ticks_tooltip: true,
	step: 0.01
});

// Without JQuery
var slider = new Slider("#ex23", {
    ticks: [0, 1, 2, 3, 4],
	ticks_positions: [0, 30, 70, 90, 100],
    ticks_snap_bounds: 200,
	formatter: function(value) {
		return 'Current value: ' + value;
	},
	ticks_tooltip: true,
	step: 0.01
});
</pre></code>
	</div>

<div id="example-24" class='slider-example'>
				<h3>Example 24:</h3>
				<p>rtl mode (auto)</p>
				<div class='well' dir ="rtl">
					<span>-5</span>
						<input id="ex24" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
					<span>20</span>
				</div>
<h5>HTML</h5>
<pre><code class="html">
&lt;div class='well' dir ="rtl"&gt;
  &lt;span&gt;-5&lt;/span&gt;
    &lt;input id="ex24" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="14"/&gt;
  &lt;span&gt;20&lt;/span&gt;
&lt;/div&gt;
</pre></code>

<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex24").slider({});
</pre></code>
			</div>

</div> 
    </div>

<script type='text/javascript' src="<%= js.jquery %>"></script>
    <script type='text/javascript' src="<%= js.slider %>"></script>
    <script type='text/javascript' src="<%= js.highlightjs %>"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script type='text/javascript'>
    	$(document).ready(function() {
    		/* Example 1 */
	    	$('#ex1').slider({
	          	formatter: function(value) {
	            	return 'Current value: ' + value;
	          	}
	        });

/* Example 2 */
	        $("#ex2").slider({});

/* Example 3 */
	        var RGBChange = function() {
	          $('#RGB').css('background', 'rgb('+r.getValue()+','+g.getValue()+','+b.getValue()+')')
	        };

var r = $('#R').slider()
	                	.on('slide', RGBChange)
	                	.data('slider');
	        var g = $('#G').slider()
	                	.on('slide', RGBChange)
	                	.data('slider');
	        var b = $('#B').slider()
	                	.on('slide', RGBChange)
	                	.data('slider');

/* Example 4 */
	        $("#ex4").slider({
	        	reversed : true
	        });

/* Example 5 */
	        $("#ex5").slider();
			$("#destroyEx5Slider").click(function() {
				$("#ex5").slider('destroy');
			});

/* Example 6 */
			$("#ex6").slider();
			$("#ex6").on('slide', function(slideEvt) {
				$("#ex6SliderVal").text(slideEvt.value);
			});

/* Example 7 */
			$("#ex7").slider();
			$("#ex7-enabled").click(function() {
				if(this.checked) {
					$("#ex7").slider("enable");
				}
				else {
					$("#ex7").slider("disable");
				}
			});

/* Example 8 */
			$("#ex8").slider({
				tooltip: 'always'
			});

/* Example 9 */
			$("#ex9").slider({
				precision: 2,
				value: 8.115
			});

/* Example 10 */
	      	$("#ex10").slider({});

/* Example 11 */
	      	$("#ex11").slider({
		        step: 20000,
		        min: 0,
		        max: 200000
	      	});

/* Example 12 */
			$("#ex12a").slider({
				id: "slider12a",
				min: 0,
				max: 10,
				value: 5
            });
			$("#ex12b").slider({
				id: "slider12b",
				min: 0,
				max: 10,
				range: true,
				value: [ 3, 7 ]
			});
			$("#ex12c").slider({
				id: "slider12c",
				min: 0,
				max: 10,
				range: true,
				value: [ 3, 7 ]
			});

/* Example 13 */
			$("#ex13").slider({
				ticks: [0, 100, 200, 300, 400],
				ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
				ticks_snap_bounds: 30,
				value: 200
			});

/* Example 14 */
			$("#ex14").slider({
				ticks: [0, 100, 200, 300, 400],
				ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
				ticks_positions: [0, 30, 70, 90, 100],
				ticks_snap_bounds: 20,
				value: 200,
			});

/* Example 15 */
			$("#ex15").slider({
				min: 10,
				max: 1000,
				scale: 'logarithmic',
				step: 10
			});

/* Example 16 */
			$("#ex16a").slider({
				min  : 0,
				max  : 10,
				value: 0,
				focus: true
			});
			$("#ex16b").slider({
				min  : 0,
				max  : 10,
				value: [ 0, 10 ],
				focus: true
			});

/* Example 17 */
			$("#ex17a").slider({
				min  : 0,
				max  : 10,
				value: 0,
				tooltip_position:'bottom'
			});
			$("#ex17b").slider({
				min  : 0,
				max  : 10,
				value: 0,
				orientation: 'vertical',
				tooltip_position:'left'
			});

/* Example 18 */
			$('#ex18a').slider({
				min  : 0,
				max  : 10,
				value: 5,
				labelledby: 'ex18-label-1'
			});

$('#ex18b').slider({
				min  : 0,
				max  : 10,
				value: [3, 6],
				labelledby: ['ex18-label-2a', 'ex18-label-2b']
			});

$('#ex20a').on('click', function(e) {
				$('#ex20a')
					.parent()
					.find(' >.well')
					.toggle()
					.find('input')
					.slider('relayout');
				e.preventDefault();
			});

/* Example 22 */
            $('#ex22').slider({});

/* Example 23 */
            $('#ex23').slider({
				ticks: [0, 1, 2, 3, 4],
				ticks_positions: [0, 30, 70, 90, 100],
				formatter: function(value) {
					return 'Current value: ' + value;
				},
				step: 0.01,
				ticks_tooltip: true
			});
		});
			/* example 24 */
			$('#ex24').slider({});
    </script>
    
  </body>
</html>
tpl/SpecRunner.tpl000064400000007516151676726750010207 0ustar00<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Jasmine Spec Runner</title>
<% css.forEach(function(style){ %>
  <link rel="stylesheet" type="text/css" href="<%= style %>">
<% }) %>
	<style type="text/css">
		#low-high-slider-styled .slider-track-low
		{
			background: rgb(0, 255, 0);
		}

#low-high-slider-styled .slider-track-high
		{
			background: rgb(255, 0, 0);
		}
		#scrollable-div {
			overflow-y: scroll;
			width: 300px;
			height: 150px;
			position: relative;
		}
		#low-div {
			padding: 2000px 0 500px 0;
		}

</style>
</head>
<body>
    <div style="
        margin-left: 2000px;
    ">
        <input id="offRightEdgeSliderInput" type="text"/>
    </div>

<input id="testSlider1" type="text"/>
	<input id="testSlider2" type="text"/>
	<input id="testSlider3" type="text"/>
	<input id="testSlider4" type="text"/>

<input class="makeSlider" type="text"/>
	<input class="makeSlider" type="text"/>

<input id="minSlider" type="text" data-slider-min="5"/>

<input id="resizeSlider" type="text"/>
  <input id="resizeSliderVertical" data-slider-orientation="vertical" type="text"/>

<div>
		<span id="accessibilitySliderLabelA">Label A</span>
		<span id="accessibilitySliderLabelB">Label B</span>
		<input id="accessibilitySliderA" type="text" data-slider-labelledby="accessibilitySliderLabelA" />
		<input id="accessibilitySliderB" type="text" data-slider-labelledby='["accessibilitySliderLabelA", "accessibilitySliderLabelB"]' />

<% with (scripts) { %>
		<% [].concat(polyfills, jasmine, boot, vendor, helpers, src, specs,reporters).forEach(function(script){ %>
		  <script src="<%= script %>"></script>
		<% }) %>
	<% }; %>
</body>
</html>
src/js/bootstrap-slider.js000064400000202171151676726750011633 0ustar00/*! =========================================================
 * bootstrap-slider.js
 *
 * Maintainers:
 *		Kyle Kemp
 *			- Twitter: @seiyria
 *			- Github:  seiyria
 *		Rohit Kalkur
 *			- Twitter: @Rovolutionary
 *			- Github:  rovolution
 *
 * =========================================================
 *
 * bootstrap-slider is released under the MIT License
 * Copyright (c) 2017 Kyle Kemp, Rohit Kalkur, and contributors
 *
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:
 *
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 *
 * ========================================================= */

/**
 * Bridget makes jQuery widgets
 * v1.0.1
 * MIT license
 */
const windowIsDefined = (typeof window === "object");

// Polyfill console methods
	if (windowIsDefined && !window.console) {
		window.console = {};
	}
	if (windowIsDefined && !window.console.log) {
		window.console.log = function () { };
	}
	if (windowIsDefined && !window.console.warn) {
		window.console.warn = function () { };
	}

// Reference to Slider constructor
	var Slider;

(function( $ ) {

'use strict';

// -------------------------- utils -------------------------- //

var slice = Array.prototype.slice;

function noop() {}

// -------------------------- definition -------------------------- //

function defineBridget( $ ) {

// bail if no jQuery
			if ( !$ ) {
				return;
			}

// -------------------------- addOptionMethod -------------------------- //

/**
			 * adds option method -> $().plugin('option', {...})
			 * @param {Function} PluginClass - constructor class
			 */
			function addOptionMethod( PluginClass ) {
				// don't overwrite original option method
				if ( PluginClass.prototype.option ) {
					return;
				}

// option setter
			  PluginClass.prototype.option = function( opts ) {
			    // bail out if not an object
			    if ( !$.isPlainObject( opts ) ){
			      return;
			    }
			    this.options = $.extend( true, this.options, opts );
			  };
			}

// -------------------------- plugin bridge -------------------------- //

// helper function for logging errors
			// $.error breaks jQuery chaining
			var logError = typeof console === 'undefined' ? noop :
			  function( message ) {
			    console.error( message );
			  };

/**
			 * jQuery plugin bridge, access methods like $elem.plugin('method')
			 * @param {String} namespace - plugin name
			 * @param {Function} PluginClass - constructor class
			 */
			function bridge( namespace, PluginClass ) {
			  // add to jQuery fn namespace
			  $.fn[ namespace ] = function( options ) {
			    if ( typeof options === 'string' ) {
			      // call plugin method when first argument is a string
			      // get arguments for method
			      var args = slice.call( arguments, 1 );

for ( var i=0, len = this.length; i < len; i++ ) {
			        var elem = this[i];
			        var instance = $.data( elem, namespace );
			        if ( !instance ) {
			          logError( "cannot call methods on " + namespace + " prior to initialization; " +
			            "attempted to call '" + options + "'" );
			          continue;
			        }
			        if ( !$.isFunction( instance[options] ) || options.charAt(0) === '_' ) {
			          logError( "no such method '" + options + "' for " + namespace + " instance" );
			          continue;
			        }

// trigger method with arguments
			        var returnValue = instance[ options ].apply( instance, args);

// break look and return first value if provided
			        if ( returnValue !== undefined && returnValue !== instance) {
			          return returnValue;
			        }
			      }
			      // return this if no return value
			      return this;
			    } else {
			      var objects = this.map( function() {
			        var instance = $.data( this, namespace );
			        if ( instance ) {
			          // apply options & init
			          instance.option( options );
			          instance._init();
			        } else {
			          // initialize new instance
			          instance = new PluginClass( this, options );
			          $.data( this, namespace, instance );
			        }
			        return $(this);
			      });

if(!objects || objects.length > 1) {
			      	return objects;
			      } else {
			      	return objects[0];
			      }
			    }
			  };

}

// -------------------------- bridget -------------------------- //

/**
			 * converts a Prototypical class into a proper jQuery plugin
			 *   the class must have a ._init method
			 * @param {String} namespace - plugin name, used in $().pluginName
			 * @param {Function} PluginClass - constructor class
			 */
			$.bridget = function( namespace, PluginClass ) {
			  addOptionMethod( PluginClass );
			  bridge( namespace, PluginClass );
			};

return $.bridget;

}

// get jquery from browser global
	  	defineBridget( $ );

})( $ );

/*************************************************

BOOTSTRAP-SLIDER SOURCE CODE

**************************************************/

(function($) {

var ErrorMsgs = {
			formatInvalidInputErrorMsg : function(input) {
				return "Invalid input value '" + input + "' passed in";
			},
			callingContextNotSliderInstance : "Calling context element does not have instance of Slider bound to it. Check your code to make sure the JQuery object returned from the call to the slider() initializer is calling the method"
		};

var SliderScale = {
			linear: {
				toValue: function(percentage) {
					var rawValue = percentage/100 * (this.options.max - this.options.min);
					var shouldAdjustWithBase = true;
					if (this.options.ticks_positions.length > 0) {
						var minv, maxv, minp, maxp = 0;
						for (var i = 1; i < this.options.ticks_positions.length; i++) {
							if (percentage <= this.options.ticks_positions[i]) {
								minv = this.options.ticks[i-1];
								minp = this.options.ticks_positions[i-1];
								maxv = this.options.ticks[i];
								maxp = this.options.ticks_positions[i];

break;
							}
						}
						var partialPercentage = (percentage - minp) / (maxp - minp);
						rawValue = minv + partialPercentage * (maxv - minv);
						shouldAdjustWithBase = false;
					}

if (this.options.ticks_positions.length > 0) {
						var minv, maxv, minp, maxp = 0;
						for (var i = 0; i < this.options.ticks.length; i++) {
							if (value  <= this.options.ticks[i]) {
								minv = (i > 0) ? this.options.ticks[i-1] : 0;
								minp = (i > 0) ? this.options.ticks_positions[i-1] : 0;
								maxv = this.options.ticks[i];
								maxp = this.options.ticks_positions[i];

break;
							}
						}
						if (i > 0) {
							var partialPercentage = (value - minv) / (maxv - minv);
							return minp + partialPercentage * (maxp - minp);
						}
					}

return 100 * (value - this.options.min) / (this.options.max - this.options.min);
				}
			},

logarithmic: {
				/* Based on http://stackoverflow.com/questions/846221/logarithmic-slider */
				toValue: function(percentage) {
					var offset = 1 - this.options.min;
					var min = Math.log(this.options.min + offset);
					var max = Math.log(this.options.max + offset);
					var value = Math.exp(min + (max - min) * percentage / 100) - offset;
					if(Math.round(value) === max) {
						return max;
					}
					value = this.options.min + Math.round((value - this.options.min) / this.options.step) * this.options.step;
					/* Rounding to the nearest step could exceed the min or
					 * max, so clip to those values. */
					if (value < this.options.min) {
						return this.options.min;
					} else if (value > this.options.max) {
						return this.options.max;
					} else {
						return value;
					}
				},
				toPercentage: function(value) {
					if (this.options.max === this.options.min) {
						return 0;
					} else {
						var offset = 1 - this.options.min;
						var max = Math.log(this.options.max + offset);
						var min = Math.log(this.options.min + offset);
						var v = Math.log(value + offset);
						return 100 * (v - min) / (max - min);
					}
				}
			}
		};

/*************************************************

CONSTRUCTOR

**************************************************/
		Slider = function(element, options) {
			createNewSlider.call(this, element, options);
			return this;
		};

function createNewSlider(element, options) {

/*
				The internal state object is used to store data about the current 'state' of slider.
				This includes values such as the `value`, `enabled`, etc...
			*/
			this._state = {
				value: null,
				enabled: null,
				offset: null,
				size: null,
				percentage: null,
				inDrag: false,
				over: false
			};

// The objects used to store the reference to the tick methods if ticks_tooltip is on
			this.ticksCallbackMap = {};
			this.handleCallbackMap = {};

if(typeof element === "string") {
				this.element = document.querySelector(element);
			} else if(element instanceof HTMLElement) {
				this.element = element;
			}

/*************************************************

Process Options

**************************************************/
			options = options ? options : {};
			var optionTypes = Object.keys(this.defaultOptions);

for(var i = 0; i < optionTypes.length; i++) {
				var optName = optionTypes[i];

// First check if an option was passed in via the constructor
				var val = options[optName];
				// If no data attrib, then check data atrributes
				val = (typeof val !== 'undefined') ? val : getDataAttrib(this.element, optName);
				// Finally, if nothing was specified, use the defaults
				val = (val !== null) ? val : this.defaultOptions[optName];

// Set all options on the instance of the Slider
				if(!this.options) {
					this.options = {};
				}
				this.options[optName] = val;
			}

// Check options.rtl
			if(this.options.rtl==='auto'){
				var computedStyle = window.getComputedStyle(this.element);
				if (computedStyle != null) {
					this.options.rtl = computedStyle.direction === 'rtl';
				} else {
					// Fix for Firefox bug in versions less than 62:
					// https://bugzilla.mozilla.org/show_bug.cgi?id=548397
					// https://bugzilla.mozilla.org/show_bug.cgi?id=1467722
					this.options.rtl = this.element.style.direction === 'rtl';
				}
			}

/*
				Validate `tooltip_position` against 'orientation`
				- if `tooltip_position` is incompatible with orientation, swith it to a default compatible with specified `orientation`
					-- default for "vertical" -> "right", "left" if rtl
					-- default for "horizontal" -> "top"
			*/
			if(this.options.orientation === "vertical" && (this.options.tooltip_position === "top" || this.options.tooltip_position === "bottom")) {
				if(this.options.rtl) {
					this.options.tooltip_position = "left";
				}else{
					this.options.tooltip_position = "right";
				}
			}
			else if(this.options.orientation === "horizontal" && (this.options.tooltip_position === "left" || this.options.tooltip_position === "right")) {

this.options.tooltip_position	= "top";

}

function getDataAttrib(element, optName) {
				var dataName = "data-slider-" + optName.replace(/_/g, '-');
				var dataValString = element.getAttribute(dataName);

try {
					return JSON.parse(dataValString);
				}
				catch(err) {
					return dataValString;
				}
			}

/*************************************************

Create Markup

**************************************************/

var origWidth = this.element.style.width;
			var updateSlider = false;
			var parent = this.element.parentNode;
			var sliderTrackSelection;
			var sliderTrackLow, sliderTrackHigh;
			var sliderMinHandle;
			var sliderMaxHandle;

if (this.sliderElem) {
				updateSlider = true;
			} else {
				/* Create elements needed for slider */
				this.sliderElem = document.createElement("div");
				this.sliderElem.className = "slider";

/* Create slider track elements */
				var sliderTrack = document.createElement("div");
				sliderTrack.className = "slider-track";

sliderTrackLow = document.createElement("div");
				sliderTrackLow.className = "slider-track-low";

sliderTrackSelection = document.createElement("div");
				sliderTrackSelection.className = "slider-selection";

sliderTrackHigh = document.createElement("div");
				sliderTrackHigh.className = "slider-track-high";

sliderMinHandle = document.createElement("div");
				sliderMinHandle.className = "slider-handle min-slider-handle";
				sliderMinHandle.setAttribute('role', 'slider');
				sliderMinHandle.setAttribute('aria-valuemin', this.options.min);
				sliderMinHandle.setAttribute('aria-valuemax', this.options.max);

sliderMaxHandle = document.createElement("div");
				sliderMaxHandle.className = "slider-handle max-slider-handle";
				sliderMaxHandle.setAttribute('role', 'slider');
				sliderMaxHandle.setAttribute('aria-valuemin', this.options.min);
				sliderMaxHandle.setAttribute('aria-valuemax', this.options.max);

sliderTrack.appendChild(sliderTrackLow);
				sliderTrack.appendChild(sliderTrackSelection);
				sliderTrack.appendChild(sliderTrackHigh);

/* Create highlight range elements */
				this.rangeHighlightElements = [];
				const rangeHighlightsOpts = this.options.rangeHighlights;
				if (Array.isArray(rangeHighlightsOpts) && rangeHighlightsOpts.length > 0) {
					for (let j = 0; j < rangeHighlightsOpts.length; j++) {
						var rangeHighlightElement = document.createElement("div");
						const customClassString = rangeHighlightsOpts[j].class || "";
						rangeHighlightElement.className = `slider-rangeHighlight slider-selection ${customClassString}`;
						this.rangeHighlightElements.push(rangeHighlightElement);
						sliderTrack.appendChild(rangeHighlightElement);
					}
				}

/* Add aria-labelledby to handle's */
				var isLabelledbyArray = Array.isArray(this.options.labelledby);
				if (isLabelledbyArray && this.options.labelledby[0]) {
					sliderMinHandle.setAttribute('aria-labelledby', this.options.labelledby[0]);
				}
				if (isLabelledbyArray && this.options.labelledby[1]) {
					sliderMaxHandle.setAttribute('aria-labelledby', this.options.labelledby[1]);
				}
				if (!isLabelledbyArray && this.options.labelledby) {
					sliderMinHandle.setAttribute('aria-labelledby', this.options.labelledby);
					sliderMaxHandle.setAttribute('aria-labelledby', this.options.labelledby);
				}

/* Create ticks */
				this.ticks = [];
				if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) {
					this.ticksContainer = document.createElement('div');
					this.ticksContainer.className = 'slider-tick-container';

for (i = 0; i < this.options.ticks.length; i++) {
						var tick = document.createElement('div');
						tick.className = 'slider-tick';
						if (this.options.ticks_tooltip) {
							var tickListenerReference = this._addTickListener();
							var enterCallback = tickListenerReference.addMouseEnter(this, tick, i);
							var leaveCallback = tickListenerReference.addMouseLeave(this, tick);

this.ticksCallbackMap[i] = {
								mouseEnter: enterCallback,
								mouseLeave: leaveCallback
							};
						}
						this.ticks.push(tick);
						this.ticksContainer.appendChild(tick);
					}

sliderTrackSelection.className += " tick-slider-selection";
				}

this.tickLabels = [];
				if (Array.isArray(this.options.ticks_labels) && this.options.ticks_labels.length > 0) {
					this.tickLabelContainer = document.createElement('div');
					this.tickLabelContainer.className = 'slider-tick-label-container';

for (i = 0; i < this.options.ticks_labels.length; i++) {
						var label = document.createElement('div');
						var noTickPositionsSpecified = this.options.ticks_positions.length === 0;
						var tickLabelsIndex = (this.options.reversed && noTickPositionsSpecified) ? (this.options.ticks_labels.length - (i + 1)) : i;
						label.className = 'slider-tick-label';
						label.innerHTML = this.options.ticks_labels[tickLabelsIndex];

this.tickLabels.push(label);
						this.tickLabelContainer.appendChild(label);
					}
				}

const createAndAppendTooltipSubElements = function(tooltipElem) {
					var arrow = document.createElement("div");
					arrow.className = "tooltip-arrow";

var inner = document.createElement("div");
					inner.className = "tooltip-inner";

tooltipElem.appendChild(arrow);
					tooltipElem.appendChild(inner);
				};

/* Create tooltip elements */
				const sliderTooltip = document.createElement("div");
				sliderTooltip.className = "tooltip tooltip-main";
				sliderTooltip.setAttribute('role', 'presentation');
				createAndAppendTooltipSubElements(sliderTooltip);

const sliderTooltipMin = document.createElement("div");
				sliderTooltipMin.className = "tooltip tooltip-min";
				sliderTooltipMin.setAttribute('role', 'presentation');
				createAndAppendTooltipSubElements(sliderTooltipMin);

const sliderTooltipMax = document.createElement("div");
				sliderTooltipMax.className = "tooltip tooltip-max";
				sliderTooltipMax.setAttribute('role', 'presentation');
				createAndAppendTooltipSubElements(sliderTooltipMax);

/* Append components to sliderElem */
				this.sliderElem.appendChild(sliderTrack);
				this.sliderElem.appendChild(sliderTooltip);
				this.sliderElem.appendChild(sliderTooltipMin);
				this.sliderElem.appendChild(sliderTooltipMax);

if (this.tickLabelContainer) {
					this.sliderElem.appendChild(this.tickLabelContainer);
				}
				if (this.ticksContainer) {
					this.sliderElem.appendChild(this.ticksContainer);
				}

this.sliderElem.appendChild(sliderMinHandle);
				this.sliderElem.appendChild(sliderMaxHandle);

/* Append slider element to parent container, right before the original <input> element */
				parent.insertBefore(this.sliderElem, this.element);

/* Hide original <input> element */
				this.element.style.display = "none";
			}
			/* If JQuery exists, cache JQ references */
			if($) {
				this.$element = $(this.element);
				this.$sliderElem = $(this.sliderElem);
			}

/*************************************************

Setup

**************************************************/
			this.eventToCallbackMap = {};
			this.sliderElem.id = this.options.id;

this.touchCapable = 'ontouchstart' in window || (window.DocumentTouch && document instanceof window.DocumentTouch);

this.touchX = 0;
			this.touchY = 0;

this.tooltip = this.sliderElem.querySelector('.tooltip-main');
			this.tooltipInner = this.tooltip.querySelector('.tooltip-inner');

this.tooltip_min = this.sliderElem.querySelector('.tooltip-min');
			this.tooltipInner_min = this.tooltip_min.querySelector('.tooltip-inner');

this.tooltip_max = this.sliderElem.querySelector('.tooltip-max');
			this.tooltipInner_max= this.tooltip_max.querySelector('.tooltip-inner');

if (SliderScale[this.options.scale]) {
				this.options.scale = SliderScale[this.options.scale];
			}

if (updateSlider === true) {
				// Reset classes
				this._removeClass(this.sliderElem, 'slider-horizontal');
				this._removeClass(this.sliderElem, 'slider-vertical');
				this._removeClass(this.sliderElem, 'slider-rtl');
				this._removeClass(this.tooltip, 'hide');
				this._removeClass(this.tooltip_min, 'hide');
				this._removeClass(this.tooltip_max, 'hide');

// Undo existing inline styles for track
				["left", "right", "top", "width", "height"].forEach(function(prop) {
					this._removeProperty(this.trackLow, prop);
					this._removeProperty(this.trackSelection, prop);
					this._removeProperty(this.trackHigh, prop);
				}, this);

// Undo inline styles on handles
				[this.handle1, this.handle2].forEach(function(handle) {
					this._removeProperty(handle, 'left');
					this._removeProperty(handle, 'right');
					this._removeProperty(handle, 'top');
				}, this);

// Undo inline styles and classes on tooltips
				[this.tooltip, this.tooltip_min, this.tooltip_max].forEach(function(tooltip) {
					this._removeProperty(tooltip, 'left');
					this._removeProperty(tooltip, 'right');
					this._removeProperty(tooltip, 'top');

this._removeClass(tooltip, 'right');
					this._removeClass(tooltip, 'left');
					this._removeClass(tooltip, 'top');
				}, this);
			}

if(this.options.orientation === 'vertical') {
				this._addClass(this.sliderElem,'slider-vertical');
				this.stylePos = 'top';
				this.mousePos = 'pageY';
				this.sizePos = 'offsetHeight';
			} else {
				this._addClass(this.sliderElem, 'slider-horizontal');
				this.sliderElem.style.width = origWidth;
				this.options.orientation = 'horizontal';
				if(this.options.rtl) {
					this.stylePos = 'right';
				} else {
					this.stylePos = 'left';
				}
				this.mousePos = 'clientX';
				this.sizePos = 'offsetWidth';
			}
			// specific rtl class
			if (this.options.rtl) {
				this._addClass(this.sliderElem, 'slider-rtl');
			}
			this._setTooltipPosition();
			/* In case ticks are specified, overwrite the min and max bounds */
			if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) {
					this.options.max = Math.max.apply(Math, this.options.ticks);
					this.options.min = Math.min.apply(Math, this.options.ticks);
			}

if (Array.isArray(this.options.value)) {
				this.options.range = true;
				this._state.value = this.options.value;
			}
			else if (this.options.range) {
				// User wants a range, but value is not an array
				this._state.value = [this.options.value, this.options.max];
			}
			else {
				this._state.value = this.options.value;
			}

this.trackLow = sliderTrackLow || this.trackLow;
			this.trackSelection = sliderTrackSelection || this.trackSelection;
			this.trackHigh = sliderTrackHigh || this.trackHigh;

if (this.options.selection === 'none') {
				this._addClass(this.trackLow, 'hide');
				this._addClass(this.trackSelection, 'hide');
				this._addClass(this.trackHigh, 'hide');
			}

else if (this.options.selection === 'after' || this.options.selection === 'before') {
				this._removeClass(this.trackLow, 'hide');
				this._removeClass(this.trackSelection, 'hide');
				this._removeClass(this.trackHigh, 'hide');
			}

this.handle1 = sliderMinHandle || this.handle1;
			this.handle2 = sliderMaxHandle || this.handle2;

if (updateSlider === true) {
				// Reset classes
				this._removeClass(this.handle1, 'round triangle');
				this._removeClass(this.handle2, 'round triangle hide');

for (i = 0; i < this.ticks.length; i++) {
					this._removeClass(this.ticks[i], 'round triangle hide');
				}
			}

var availableHandleModifiers = ['round', 'triangle', 'custom'];
			var isValidHandleType = availableHandleModifiers.indexOf(this.options.handle) !== -1;
			if (isValidHandleType) {
				this._addClass(this.handle1, this.options.handle);
				this._addClass(this.handle2, this.options.handle);

for (i = 0; i < this.ticks.length; i++) {
					this._addClass(this.ticks[i], this.options.handle);
				}
			}

this._state.offset = this._offset(this.sliderElem);
			this._state.size = this.sliderElem[this.sizePos];
			this.setValue(this._state.value);

/******************************************

Bind Event Listeners

******************************************/

// Bind keyboard handlers
			this.handle1Keydown = this._keydown.bind(this, 0);
			this.handle1.addEventListener("keydown", this.handle1Keydown, false);

this.handle2Keydown = this._keydown.bind(this, 1);
			this.handle2.addEventListener("keydown", this.handle2Keydown, false);

this.mousedown = this._mousedown.bind(this);
			this.touchstart = this._touchstart.bind(this);
			this.touchmove = this._touchmove.bind(this);

if (this.touchCapable) {
				// Test for passive event support
				let supportsPassive = false;
				try {
					let opts = Object.defineProperty({}, 'passive', {
						get: function() {
							supportsPassive = true;
						}
					});
					window.addEventListener("test", null, opts);
				} catch (e) {}
				// Use our detect's results. passive applied if supported, capture will be false either way.
				let eventOptions = supportsPassive ? { passive: true } : false;
				// Bind touch handlers
				this.sliderElem.addEventListener("touchstart", this.touchstart, eventOptions);
				this.sliderElem.addEventListener("touchmove", this.touchmove, eventOptions);
			}
			this.sliderElem.addEventListener("mousedown", this.mousedown, false);

// Bind window handlers
			this.resize = this._resize.bind(this);
			window.addEventListener("resize", this.resize, false);

// Bind tooltip-related handlers
			if(this.options.tooltip === 'hide') {
				this._addClass(this.tooltip, 'hide');
				this._addClass(this.tooltip_min, 'hide');
				this._addClass(this.tooltip_max, 'hide');
			}
			else if(this.options.tooltip === 'always') {
				this._showTooltip();
				this._alwaysShowTooltip = true;
			}
			else {
				this.showTooltip = this._showTooltip.bind(this);
				this.hideTooltip = this._hideTooltip.bind(this);

if (this.options.ticks_tooltip) {
					var callbackHandle = this._addTickListener();
					//create handle1 listeners and store references in map
					var mouseEnter = callbackHandle.addMouseEnter(this, this.handle1);
					var mouseLeave = callbackHandle.addMouseLeave(this, this.handle1);
					this.handleCallbackMap.handle1 = {
						mouseEnter: mouseEnter,
						mouseLeave: mouseLeave
					};
					//create handle2 listeners and store references in map
					mouseEnter = callbackHandle.addMouseEnter(this, this.handle2);
					mouseLeave = callbackHandle.addMouseLeave(this, this.handle2);
					this.handleCallbackMap.handle2 = {
						mouseEnter: mouseEnter,
						mouseLeave: mouseLeave
					};
				} else {
					this.sliderElem.addEventListener("mouseenter", this.showTooltip, false);
					this.sliderElem.addEventListener("mouseleave", this.hideTooltip, false);
				}

this.handle1.addEventListener("focus", this.showTooltip, false);
				this.handle1.addEventListener("blur", this.hideTooltip, false);

this.handle2.addEventListener("focus", this.showTooltip, false);
				this.handle2.addEventListener("blur", this.hideTooltip, false);
			}

if(this.options.enabled) {
				this.enable();
			} else {
				this.disable();
			}

}

/*************************************************

INSTANCE PROPERTIES/METHODS

- Any methods bound to the prototype are considered
		part of the plugin's `public` interface

**************************************************/
		Slider.prototype = {
			_init: function() {}, // NOTE: Must exist to support bridget

constructor: Slider,

defaultOptions: {
				id: "",
				min: 0,
				max: 10,
				step: 1,
				precision: 0,
				orientation: 'horizontal',
				value: 5,
				range: false,
				selection: 'before',
				tooltip: 'show',
				tooltip_split: false,
				handle: 'round',
				reversed: false,
				rtl: 'auto',
				enabled: true,
				formatter: function(val) {
					if (Array.isArray(val)) {
						return val[0] + " : " + val[1];
					} else {
						return val;
					}
				},
				natural_arrow_keys: false,
				ticks: [],
				ticks_positions: [],
				ticks_labels: [],
				ticks_snap_bounds: 0,
				ticks_tooltip: false,
				scale: 'linear',
				focus: false,
				tooltip_position: null,
				labelledby: null,
				rangeHighlights: []
			},

getElement: function() {
				return this.sliderElem;
			},

getValue: function() {
				if (this.options.range) {
					return this._state.value;
				}
				else {
					return this._state.value[0];
				}
			},

setValue: function(val, triggerSlideEvent, triggerChangeEvent) {
				if (!val) {
					val = 0;
				}
				var oldValue = this.getValue();
				this._state.value = this._validateInputValue(val);
				var applyPrecision = this._applyPrecision.bind(this);

if (this.options.range) {
					this._state.value[0] = applyPrecision(this._state.value[0]);
					this._state.value[1] = applyPrecision(this._state.value[1]);

this._state.value[0] = Math.max(this.options.min, Math.min(this.options.max, this._state.value[0]));
					this._state.value[1] = Math.max(this.options.min, Math.min(this.options.max, this._state.value[1]));
				}
				else {
					this._state.value = applyPrecision(this._state.value);
					this._state.value = [ Math.max(this.options.min, Math.min(this.options.max, this._state.value))];
					this._addClass(this.handle2, 'hide');
					if (this.options.selection === 'after') {
						this._state.value[1] = this.options.max;
					} else {
						this._state.value[1] = this.options.min;
					}
				}

if (this.options.max > this.options.min) {
					this._state.percentage = [
						this._toPercentage(this._state.value[0]),
						this._toPercentage(this._state.value[1]),
						this.options.step * 100 / (this.options.max - this.options.min)
					];
				} else {
					this._state.percentage = [0, 0, 100];
				}

this._layout();
				var newValue = this.options.range ? this._state.value : this._state.value[0];

this._setDataVal(newValue);
				if(triggerSlideEvent === true) {
					this._trigger('slide', newValue);
				}
				if( (oldValue !== newValue) && (triggerChangeEvent === true) ) {
					this._trigger('change', {
						oldValue: oldValue,
						newValue: newValue
					});
				}

return this;
			},

destroy: function(){
				// Remove event handlers on slider elements
				this._removeSliderEventHandlers();

// Remove the slider from the DOM
				this.sliderElem.parentNode.removeChild(this.sliderElem);
				/* Show original <input> element */
				this.element.style.display = "";

// Clear out custom event bindings
				this._cleanUpEventCallbacksMap();

// Remove data values
				this.element.removeAttribute("data");

// Remove JQuery handlers/data
				if($) {
					this._unbindJQueryEventHandlers();
					this.$element.removeData('slider');
				}
			},

disable: function() {
				this._state.enabled = false;
				this.handle1.removeAttribute("tabindex");
				this.handle2.removeAttribute("tabindex");
				this._addClass(this.sliderElem, 'slider-disabled');
				this._trigger('slideDisabled');

return this;
			},

enable: function() {
				this._state.enabled = true;
				this.handle1.setAttribute("tabindex", 0);
				this.handle2.setAttribute("tabindex", 0);
				this._removeClass(this.sliderElem, 'slider-disabled');
				this._trigger('slideEnabled');

return this;
			},

toggle: function() {
				if(this._state.enabled) {
					this.disable();
				} else {
					this.enable();
				}
				return this;
			},

isEnabled: function() {
				return this._state.enabled;
			},

on: function(evt, callback) {
				this._bindNonQueryEventHandler(evt, callback);
				return this;
			},

off: function(evt, callback) {
				if($) {
					this.$element.off(evt, callback);
					this.$sliderElem.off(evt, callback);
				} else {
					this._unbindNonQueryEventHandler(evt, callback);
				}
			},

getAttribute: function(attribute) {
				if(attribute) {
					return this.options[attribute];
				} else {
					return this.options;
				}
			},

setAttribute: function(attribute, value) {
				this.options[attribute] = value;
				return this;
			},

refresh: function() {
				this._removeSliderEventHandlers();
				createNewSlider.call(this, this.element, this.options);
				if($) {
					// Bind new instance of slider to the element
					$.data(this.element, 'slider', this);
				}
				return this;
			},

relayout: function() {
				this._resize();
				return this;
			},

/******************************+

HELPERS

- Any method that is not part of the public interface.
			- Place it underneath this comment block and write its signature like so:

_fnName : function() {...}

********************************/
			_removeSliderEventHandlers: function() {
				// Remove keydown event listeners
				this.handle1.removeEventListener("keydown", this.handle1Keydown, false);
				this.handle2.removeEventListener("keydown", this.handle2Keydown, false);

//remove the listeners from the ticks and handles if they had their own listeners
				if (this.options.ticks_tooltip) {
					var ticks = this.ticksContainer.getElementsByClassName('slider-tick');
					for(var i = 0; i < ticks.length; i++ ){
						ticks[i].removeEventListener('mouseenter', this.ticksCallbackMap[i].mouseEnter, false);
						ticks[i].removeEventListener('mouseleave', this.ticksCallbackMap[i].mouseLeave, false);
					}
					this.handle1.removeEventListener('mouseenter', this.handleCallbackMap.handle1.mouseEnter, false);
					this.handle2.removeEventListener('mouseenter', this.handleCallbackMap.handle2.mouseEnter, false);
					this.handle1.removeEventListener('mouseleave', this.handleCallbackMap.handle1.mouseLeave, false);
					this.handle2.removeEventListener('mouseleave', this.handleCallbackMap.handle2.mouseLeave, false);
				}

this.handleCallbackMap = null;
				this.ticksCallbackMap = null;

if (this.showTooltip) {
					this.handle1.removeEventListener("focus", this.showTooltip, false);
					this.handle2.removeEventListener("focus", this.showTooltip, false);
				}
				if (this.hideTooltip) {
					this.handle1.removeEventListener("blur", this.hideTooltip, false);
					this.handle2.removeEventListener("blur", this.hideTooltip, false);
				}

// Remove event listeners from sliderElem
				if (this.showTooltip) {
					this.sliderElem.removeEventListener("mouseenter", this.showTooltip, false);
				}
				if (this.hideTooltip) {
					this.sliderElem.removeEventListener("mouseleave", this.hideTooltip, false);
				}
				this.sliderElem.removeEventListener("touchstart", this.touchstart, false);
				this.sliderElem.removeEventListener("touchmove", this.touchmove, false);
				this.sliderElem.removeEventListener("mousedown", this.mousedown, false);

// Remove window event listener
				window.removeEventListener("resize", this.resize, false);
			},
			_bindNonQueryEventHandler: function(evt, callback) {
				if(this.eventToCallbackMap[evt] === undefined) {
					this.eventToCallbackMap[evt] = [];
				}
				this.eventToCallbackMap[evt].push(callback);
			},
			_unbindNonQueryEventHandler: function(evt, callback) {
				var callbacks = this.eventToCallbackMap[evt];
				if(callbacks !== undefined) {
					for (var i = 0; i < callbacks.length; i++) {
						if (callbacks[i] === callback) {
							callbacks.splice(i, 1);
							break;
						}
					}
				}
			},
			_cleanUpEventCallbacksMap: function() {
				var eventNames = Object.keys(this.eventToCallbackMap);
				for(var i = 0; i < eventNames.length; i++) {
					var eventName = eventNames[i];
					delete this.eventToCallbackMap[eventName];
				}
			},
			_showTooltip: function() {
				if (this.options.tooltip_split === false ){
					this._addClass(this.tooltip, 'in');
					this.tooltip_min.style.display = 'none';
					this.tooltip_max.style.display = 'none';
			    } else {
					this._addClass(this.tooltip_min, 'in');
					this._addClass(this.tooltip_max, 'in');
					this.tooltip.style.display = 'none';
				}
				this._state.over = true;
			},
			_hideTooltip: function() {
				if (this._state.inDrag === false && this.alwaysShowTooltip !== true) {
					this._removeClass(this.tooltip, 'in');
					this._removeClass(this.tooltip_min, 'in');
					this._removeClass(this.tooltip_max, 'in');
				}
				this._state.over = false;
			},
			_setToolTipOnMouseOver: function _setToolTipOnMouseOver(tempState){
				var formattedTooltipVal = this.options.formatter(!tempState ? this._state.value[0]: tempState.value[0]);
				var positionPercentages = !tempState ? getPositionPercentages(this._state, this.options.reversed) : getPositionPercentages(tempState, this.options.reversed);
				this._setText(this.tooltipInner, formattedTooltipVal);

this.tooltip.style[this.stylePos] = `${positionPercentages[0]}%`;

if(this.options.reversed) {
					positionPercentages = [ 100 - this._state.percentage[0], this.options.range ? 100 - this._state.percentage[1] : this._state.percentage[1]];
				}
				else {
					positionPercentages = [ this._state.percentage[0], this._state.percentage[1] ];
				}

this.handle1.style[this.stylePos] = `${positionPercentages[0]}%`;
				this.handle1.setAttribute('aria-valuenow', this._state.value[0]);
				if (isNaN(this.options.formatter(this._state.value[0])) ) {
					this.handle1.setAttribute('aria-valuetext', this.options.formatter(this._state.value[0]));
				}

this.handle2.style[this.stylePos] =`${positionPercentages[1]}%`;
				this.handle2.setAttribute('aria-valuenow', this._state.value[1]);
				if (isNaN(this.options.formatter(this._state.value[1])) ) {
					this.handle2.setAttribute('aria-valuetext', this.options.formatter(this._state.value[1]));
				}

/* Position highlight range elements */
				if (this.rangeHighlightElements.length > 0 && Array.isArray(this.options.rangeHighlights) && this.options.rangeHighlights.length > 0) {
					for (let i = 0; i < this.options.rangeHighlights.length; i++) {
						var startPercent = this._toPercentage(this.options.rangeHighlights[i].start);
						var endPercent = this._toPercentage(this.options.rangeHighlights[i].end);

if (this.options.reversed) {
							var sp = 100-endPercent;
							endPercent = 100-startPercent;
							startPercent = sp;
						}

var currentRange = this._createHighlightRange(startPercent, endPercent);

if (currentRange) {
							if (this.options.orientation === 'vertical') {
								this.rangeHighlightElements[i].style.top = `${currentRange.start}%`;
								this.rangeHighlightElements[i].style.height = `${currentRange.size}%`;
							} else {
								if(this.options.rtl){
									this.rangeHighlightElements[i].style.right = `${currentRange.start}%`;
								} else {
									this.rangeHighlightElements[i].style.left = `${currentRange.start}%`;
								}
								this.rangeHighlightElements[i].style.width = `${currentRange.size}%`;
							}
						} else {
							this.rangeHighlightElements[i].style.display = "none";
						}
					}
				}

/* Position ticks and labels */
				if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) {

if (this.tickLabelContainer) {
						var extraMargin = 0;
						if (this.options.ticks_positions.length === 0) {
							if (this.options.orientation !== 'vertical') {
								this.tickLabelContainer.style[styleMargin] = `${ -labelSize/2 }px`;
							}

extraMargin = this.tickLabelContainer.offsetHeight;
						} else {
							/* Chidren are position absolute, calculate height by finding the max offsetHeight of a child */
							for (i = 0 ; i < this.tickLabelContainer.childNodes.length; i++) {
								if (this.tickLabelContainer.childNodes[i].offsetHeight > extraMargin) {
									extraMargin = this.tickLabelContainer.childNodes[i].offsetHeight;
								}
							}
						}
						if (this.options.orientation === 'horizontal') {
							this.sliderElem.style.marginBottom = `${ extraMargin }px`;
						}
					}
					for (var i = 0; i < this.options.ticks.length; i++) {

var percentage = this.options.ticks_positions[i] || this._toPercentage(this.options.ticks[i]);

if (this.options.reversed) {
							percentage = 100 - percentage;
						}

this.ticks[i].style[this.stylePos] = `${ percentage }%`;

/* Set class labels to denote whether ticks are in the selection */
						this._removeClass(this.ticks[i], 'in-selection');
						if (!this.options.range) {
							if (this.options.selection === 'after' && percentage >= positionPercentages[0]){
								this._addClass(this.ticks[i], 'in-selection');
							} else if (this.options.selection === 'before' && percentage <= positionPercentages[0]) {
								this._addClass(this.ticks[i], 'in-selection');
							}
						} else if (percentage >= positionPercentages[0] && percentage <= positionPercentages[1]) {
							this._addClass(this.ticks[i], 'in-selection');
						}

if (this.tickLabels[i]) {
							this.tickLabels[i].style[styleSize] = `${labelSize}px`;

if (this.options.orientation !== 'vertical' && this.options.ticks_positions[i] !== undefined) {
								this.tickLabels[i].style.position = 'absolute';
								this.tickLabels[i].style[this.stylePos] = `${percentage}%`;
								this.tickLabels[i].style[styleMargin] = -labelSize/2 + 'px';
							} else if (this.options.orientation === 'vertical') {
								if(this.options.rtl){
									this.tickLabels[i].style['marginRight'] = `${this.sliderElem.offsetWidth }px`;
								}else{
									this.tickLabels[i].style['marginLeft'] = `${this.sliderElem.offsetWidth }px`;
								}
								this.tickLabelContainer.style[styleMargin] = this.sliderElem.offsetWidth / 2 * -1 + 'px';
							}

/* Set class labels to indicate tick labels are in the selection or selected */
							this._removeClass(this.tickLabels[i], 'label-in-selection label-is-selection');
							if (!this.options.range) {
								if (this.options.selection === 'after' && percentage >= positionPercentages[0]) {
									this._addClass(this.tickLabels[i], 'label-in-selection');
								} else if (this.options.selection === 'before' && percentage <= positionPercentages[0]) {
									this._addClass(this.tickLabels[i], 'label-in-selection');
								}
								if (percentage === positionPercentages[0]) {
									this._addClass(this.tickLabels[i], 'label-is-selection');
								}
							} else if (percentage >= positionPercentages[0] && percentage <= positionPercentages[1]) {
								this._addClass(this.tickLabels[i], 'label-in-selection');
								if (percentage === positionPercentages[0] || positionPercentages[1]) {
									this._addClass(this.tickLabels[i], 'label-is-selection');
								}
							}
						}
					}
				}

var formattedTooltipVal;

if (this.options.range) {
					formattedTooltipVal = this.options.formatter(this._state.value);
					this._setText(this.tooltipInner, formattedTooltipVal);
					this.tooltip.style[this.stylePos] = `${ (positionPercentages[1] + positionPercentages[0])/2 }%`;

var innerTooltipMinText = this.options.formatter(this._state.value[0]);
					this._setText(this.tooltipInner_min, innerTooltipMinText);

var innerTooltipMaxText = this.options.formatter(this._state.value[1]);
					this._setText(this.tooltipInner_max, innerTooltipMaxText);

this.tooltip_min.style[this.stylePos] = `${ positionPercentages[0] }%`;

this.tooltip_max.style[this.stylePos] = `${ positionPercentages[1] }%`;

} else {
					formattedTooltipVal = this.options.formatter(this._state.value[0]);
					this._setText(this.tooltipInner, formattedTooltipVal);

this.tooltip.style[this.stylePos] = `${ positionPercentages[0] }%`;
				}

if (this.options.orientation === 'vertical') {
					this.trackLow.style.top = '0';
					this.trackLow.style.height = Math.min(positionPercentages[0], positionPercentages[1]) +'%';

this.trackSelection.style.top = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
					this.trackSelection.style.height = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%';

this.trackHigh.style.bottom = '0';
					this.trackHigh.style.height = (100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1])) +'%';
				}
				else {
					if(this.stylePos==='right') {
						this.trackLow.style.right = '0';
					} else {
						this.trackLow.style.left = '0';
					}
					this.trackLow.style.width = Math.min(positionPercentages[0], positionPercentages[1]) +'%';

if(this.stylePos==='right') {
						this.trackSelection.style.right = Math.min(positionPercentages[0], positionPercentages[1]) + '%';
					} else {
						this.trackSelection.style.left = Math.min(positionPercentages[0], positionPercentages[1]) + '%';
					}
					this.trackSelection.style.width = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%';

if(this.stylePos==='right') {
						this.trackHigh.style.left = '0';
					} else {
						this.trackHigh.style.right = '0';
					}
					this.trackHigh.style.width = (100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1])) +'%';

var offset_min = this.tooltip_min.getBoundingClientRect();
					var offset_max = this.tooltip_max.getBoundingClientRect();

if (this.options.tooltip_position === 'bottom') {
						if (offset_min.right > offset_max.left) {
							this._removeClass(this.tooltip_max, 'bottom');
							this._addClass(this.tooltip_max, 'top');
							this.tooltip_max.style.top = '';
							this.tooltip_max.style.bottom = 22 + 'px';
						} else {
							this._removeClass(this.tooltip_max, 'top');
							this._addClass(this.tooltip_max, 'bottom');
							this.tooltip_max.style.top = this.tooltip_min.style.top;
							this.tooltip_max.style.bottom = '';
						}
					} else {
						if (offset_min.right > offset_max.left) {
							this._removeClass(this.tooltip_max, 'top');
							this._addClass(this.tooltip_max, 'bottom');
							this.tooltip_max.style.top = 18 + 'px';
						} else {
							this._removeClass(this.tooltip_max, 'bottom');
							this._addClass(this.tooltip_max, 'top');
							this.tooltip_max.style.top = this.tooltip_min.style.top;
						}
					}
				}
			},
			_createHighlightRange: function (start, end) {
				if (this._isHighlightRange(start, end)) {
					if (start > end) {
						return {'start': end, 'size': start - end};
					}
					return {'start': start, 'size': end - start};
				}
				return null;
			},
			_isHighlightRange: function (start, end) {
				if (0 <= start && start <= 100 && 0 <= end && end <= 100) {
					return true;
				}
				else {
					return false;
				}
			},
			_resize: function (ev) {
				/*jshint unused:false*/
				this._state.offset = this._offset(this.sliderElem);
				this._state.size = this.sliderElem[this.sizePos];
				this._layout();
			},
			_removeProperty: function(element, prop) {
				if (element.style.removeProperty) {
				    element.style.removeProperty(prop);
				} else {
				    element.style.removeAttribute(prop);
				}
			},
			_mousedown: function(ev) {
				if(!this._state.enabled) {
					return false;
				}

if (ev.preventDefault){
					ev.preventDefault();
				}

this._state.offset = this._offset(this.sliderElem);
				this._state.size = this.sliderElem[this.sizePos];

var percentage = this._getPercentage(ev);

if (this.options.range) {
					var diff1 = Math.abs(this._state.percentage[0] - percentage);
					var diff2 = Math.abs(this._state.percentage[1] - percentage);
					this._state.dragged = (diff1 < diff2) ? 0 : 1;
					this._adjustPercentageForRangeSliders(percentage);
				} else {
					this._state.dragged = 0;
				}

this._state.percentage[this._state.dragged] = percentage;
				this._layout();

if (this.touchCapable) {
					document.removeEventListener("touchmove", this.mousemove, false);
					document.removeEventListener("touchend", this.mouseup, false);
				}

if(this.mousemove){
					document.removeEventListener("mousemove", this.mousemove, false);
				}
				if(this.mouseup){
					document.removeEventListener("mouseup", this.mouseup, false);
				}

this.mousemove = this._mousemove.bind(this);
				this.mouseup = this._mouseup.bind(this);

if (this.touchCapable) {
					// Touch: Bind touch events:
					document.addEventListener("touchmove", this.mousemove, false);
					document.addEventListener("touchend", this.mouseup, false);
				}
				// Bind mouse events:
				document.addEventListener("mousemove", this.mousemove, false);
				document.addEventListener("mouseup", this.mouseup, false);

this._state.inDrag = true;
				var newValue = this._calculateValue();

this._trigger('slideStart', newValue);

this._setDataVal(newValue);
				this.setValue(newValue, false, true);

ev.returnValue = false;

if (this.options.focus) {
					this._triggerFocusOnHandle(this._state.dragged);
				}

return true;
			},
			_touchstart: function(ev) {
				if (ev.changedTouches === undefined) {
					this._mousedown(ev);
					return;
				}

var dir;
				switch (ev.keyCode) {
					case 37: // left
					case 40: // down
						dir = -1;
						break;
					case 39: // right
					case 38: // up
						dir = 1;
						break;
				}
				if (!dir) {
					return;
				}

// use natural arrow keys instead of from min to max
				if (this.options.natural_arrow_keys) {
					var ifVerticalAndNotReversed = (this.options.orientation === 'vertical' && !this.options.reversed);
					var ifHorizontalAndReversed = (this.options.orientation === 'horizontal' && this.options.reversed); // @todo control with rtl

if (ifVerticalAndNotReversed || ifHorizontalAndReversed) {
						dir = -dir;
					}
				}

var val = this._state.value[handleIdx] + dir * this.options.step;
				const percentage = (val / this.options.max) * 100;
				this._state.keyCtrl = handleIdx;
				if (this.options.range) {
					this._adjustPercentageForRangeSliders(percentage);
					const val1 = (!this._state.keyCtrl) ? val : this._state.value[0];
					const val2 = (this._state.keyCtrl) ? val : this._state.value[1];
					val = [ val1, val2];
				}

this._trigger('slideStart', val);
				this._setDataVal(val);
				this.setValue(val, true, true);

this._setDataVal(val);
				this._trigger('slideStop', val);
				this._layout();

this._pauseEvent(ev);
				delete this._state.keyCtrl;

return false;
			},
			_pauseEvent: function(ev) {
				if(ev.stopPropagation) {
					ev.stopPropagation();
				}
				if(ev.preventDefault) {
					ev.preventDefault();
				}
				ev.cancelBubble=true;
				ev.returnValue=false;
			},
			_mousemove: function(ev) {
				if(!this._state.enabled) {
					return false;
				}

var percentage = this._getPercentage(ev);
				this._adjustPercentageForRangeSliders(percentage);
				this._state.percentage[this._state.dragged] = percentage;
				this._layout();

var val = this._calculateValue(true);
				this.setValue(val, true, true);

return false;
			},
			_touchmove: function(ev) {
				if (ev.changedTouches === undefined) {
					return;
				}

var touch = ev.changedTouches[0];

var xDiff = touch.pageX - this.touchX;
				var yDiff = touch.pageY - this.touchY;

if (!this._state.inDrag) {
					// Vertical Slider
					if (this.options.orientation === 'vertical' && (xDiff <= 5 && xDiff >= -5) && (yDiff >=15 || yDiff <= -15)) {
						this._mousedown(ev);
					}
					// Horizontal slider.
					else if ((yDiff <= 5 && yDiff >= -5) && (xDiff >= 15 || xDiff <= -15)) {
						this._mousedown(ev);
					}
				}
			},
			_adjustPercentageForRangeSliders: function(percentage) {
				if (this.options.range) {
					var precision = this._getNumDigitsAfterDecimalPlace(percentage);
					precision = precision ? precision - 1 : 0;
					var percentageWithAdjustedPrecision = this._applyToFixedAndParseFloat(percentage, precision);
					if (this._state.dragged === 0 && this._applyToFixedAndParseFloat(this._state.percentage[1], precision) < percentageWithAdjustedPrecision) {
						this._state.percentage[0] = this._state.percentage[1];
						this._state.dragged = 1;
					} else if (this._state.dragged === 1 && this._applyToFixedAndParseFloat(this._state.percentage[0], precision) > percentageWithAdjustedPrecision) {
						this._state.percentage[1] = this._state.percentage[0];
						this._state.dragged = 0;
					}
					else if (this._state.keyCtrl === 0 && (((this._state.value[1] / this.options.max) * 100) < percentage)) {
						this._state.percentage[0] = this._state.percentage[1];
						this._state.keyCtrl = 1;
						this.handle2.focus();
					}
					else if (this._state.keyCtrl === 1 && (((this._state.value[0] / this.options.max) * 100) > percentage)) {
						this._state.percentage[1] = this._state.percentage[0];
						this._state.keyCtrl = 0;
						this.handle1.focus();
					}
				}
			},
			_mouseup: function() {
				if(!this._state.enabled) {
					return false;
				}
				if (this.touchCapable) {
					// Touch: Unbind touch event handlers:
					document.removeEventListener("touchmove", this.mousemove, false);
					document.removeEventListener("touchend", this.mouseup, false);
				}
				// Unbind mouse event handlers:
				document.removeEventListener("mousemove", this.mousemove, false);
				document.removeEventListener("mouseup", this.mouseup, false);

this._state.inDrag = false;
				if (this._state.over === false) {
					this._hideTooltip();
				}
				var val = this._calculateValue(true);

this._layout();
				this._setDataVal(val);
				this._trigger('slideStop', val);

// No longer need 'dragged' after mouse up
				this._state.dragged = null;

return false;
			},
			_calculateValue: function(snapToClosestTick) {
				var val;
				if (this.options.range) {
					val = [this.options.min,this.options.max];
					if (this._state.percentage[0] !== 0){
						val[0] = this._toValue(this._state.percentage[0]);
						val[0] = this._applyPrecision(val[0]);
					}
					if (this._state.percentage[1] !== 100){
						val[1] = this._toValue(this._state.percentage[1]);
						val[1] = this._applyPrecision(val[1]);
					}
					if (snapToClosestTick) {
						val[0] = this._snapToClosestTick(val[0]);
						val[1] = this._snapToClosestTick(val[1]);
					}	
				} else {
					val = this._toValue(this._state.percentage[0]);
					val = parseFloat(val);
					val = this._applyPrecision(val);
					if (snapToClosestTick) {
						val = this._snapToClosestTick(val);
					}
				}

return val;
			},
			_snapToClosestTick(val){
				var min = [val, Infinity];
				for (var i = 0; i < this.options.ticks.length; i++) {
					var diff = Math.abs(this.options.ticks[i] - val);
					if (diff <= min[1]) {
						min = [this.options.ticks[i], diff];
					}
				}
				if (min[1] <= this.options.ticks_snap_bounds) {
					return min[0];
				}
				return val;
			},
			_applyPrecision: function(val) {
				var precision = this.options.precision || this._getNumDigitsAfterDecimalPlace(this.options.step);
				return this._applyToFixedAndParseFloat(val, precision);
			},
			_getNumDigitsAfterDecimalPlace: function(num) {
				var match = (''+num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
				if (!match) { return 0; }
				return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
			},
			_applyToFixedAndParseFloat: function(num, toFixedInput) {
				var truncatedNum = num.toFixed(toFixedInput);
				return parseFloat(truncatedNum);
			},
			/*
				Credits to Mike Samuel for the following method!
				Source: http://stackoverflow.com/questions/10454518/javascript-how-to-retrieve-the-number-of-decimals-of-a-string-number
			*/
			_getPercentage: function(ev) {
				if (this.touchCapable && (ev.type === 'touchstart' || ev.type === 'touchmove')) {
					ev = ev.touches[0];
				}

var eventPosition = ev[this.mousePos];
				var sliderOffset = this._state.offset[this.stylePos];
				var distanceToSlide = eventPosition - sliderOffset;
				if(this.stylePos==='right') {
					distanceToSlide = -distanceToSlide;
				}
				// Calculate what percent of the length the slider handle has slid
				var percentage = (distanceToSlide / this._state.size) * 100;
				percentage = Math.round(percentage / this._state.percentage[2]) * this._state.percentage[2];
				if (this.options.reversed) {
					percentage = 100 - percentage;
				}

// Make sure the percent is within the bounds of the slider.
				// 0% corresponds to the 'min' value of the slide
				// 100% corresponds to the 'max' value of the slide
				return Math.max(0, Math.min(100, percentage));
			},
			_validateInputValue: function(val) {
				if (!isNaN(+val)) {
					return +val;
				} else if (Array.isArray(val)) {
					this._validateArray(val);
					return val;
				} else {
					throw new Error(ErrorMsgs.formatInvalidInputErrorMsg(val));
				}
			},
			_validateArray: function(val) {
				for(var i = 0; i < val.length; i++) {
					var input =  val[i];
					if (typeof input !== 'number') { throw new Error( ErrorMsgs.formatInvalidInputErrorMsg(input) ); }
				}
			},
			_setDataVal: function(val) {
				this.element.setAttribute('data-value', val);
				this.element.setAttribute('value', val);
				this.element.value = val;
			},
			_trigger: function(evt, val) {
				val = (val || val === 0) ? val : undefined;

var callbackFnArray = this.eventToCallbackMap[evt];
				if(callbackFnArray && callbackFnArray.length) {
					for(var i = 0; i < callbackFnArray.length; i++) {
						var callbackFn = callbackFnArray[i];
						callbackFn(val);
					}
				}

/* If JQuery exists, trigger JQuery events */
				if($) {
					this._triggerJQueryEvent(evt, val);
				}
			},
			_triggerJQueryEvent: function(evt, val) {
				var eventData = {
					type: evt,
					value: val
				};
				this.$element.trigger(eventData);
				this.$sliderElem.trigger(eventData);
			},
			_unbindJQueryEventHandlers: function() {
				this.$element.off();
				this.$sliderElem.off();
			},
			_setText: function(element, text) {
				if(typeof element.textContent !== "undefined") {
					element.textContent = text;
				} else if(typeof element.innerText !== "undefined") {
					element.innerText = text;
				}
			},
			_removeClass: function(element, classString) {
				var classes = classString.split(" ");
				var newClasses = element.className;

for(var i = 0; i < classes.length; i++) {
					var classTag = classes[i];
					var regex = new RegExp("(?:\\s|^)" + classTag + "(?:\\s|$)");
					newClasses = newClasses.replace(regex, " ");
				}

element.className = newClasses.trim();
			},
			_addClass: function(element, classString) {
				var classes = classString.split(" ");
				var newClasses = element.className;

for(var i = 0; i < classes.length; i++) {
					var classTag = classes[i];
					var regex = new RegExp("(?:\\s|^)" + classTag + "(?:\\s|$)");
					var ifClassExists = regex.test(newClasses);

if(!ifClassExists) {
						newClasses += " " + classTag;
					}
				}

element.className = newClasses.trim();
			},
			_offsetLeft: function(obj){
				return obj.getBoundingClientRect().left;
			},
			_offsetRight: function(obj){
				return obj.getBoundingClientRect().right;
			},
			_offsetTop: function(obj){
				var offsetTop = obj.offsetTop;
				while((obj = obj.offsetParent) && !isNaN(obj.offsetTop)){
					offsetTop += obj.offsetTop;
					if( obj.tagName !== 'BODY') {
						offsetTop -= obj.scrollTop;
					}
				}
				return offsetTop;
			},
			_offset: function (obj) {
				return {
					left: this._offsetLeft(obj),
					right: this._offsetRight(obj),
					top: this._offsetTop(obj)
				};
		    },
			_css: function(elementRef, styleName, value) {
				if ($) {
					$.style(elementRef, styleName, value);
				} else {
					var style = styleName.replace(/^-ms-/, "ms-").replace(/-([\da-z])/gi, function (all, letter) {
						return letter.toUpperCase();
					});
					elementRef.style[style] = value;
				}
			},
			_toValue: function(percentage) {
				return this.options.scale.toValue.apply(this, [percentage]);
			},
			_toPercentage: function(value) {
				return this.options.scale.toPercentage.apply(this, [value]);
			},
			_setTooltipPosition: function(){
				var tooltips = [this.tooltip, this.tooltip_min, this.tooltip_max];
				if (this.options.orientation === 'vertical'){
					var tooltipPos;
					if(this.options.tooltip_position) {
						tooltipPos = this.options.tooltip_position;
					} else {
						if(this.options.rtl) {
							tooltipPos = 'left';
						} else {
							tooltipPos = 'right';
						}
					}
					var oppositeSide = (tooltipPos === 'left') ? 'right' : 'left';
					tooltips.forEach(function(tooltip){
						this._addClass(tooltip, tooltipPos);
						tooltip.style[oppositeSide] = '100%';
					}.bind(this));
				} else if(this.options.tooltip_position === 'bottom') {
					tooltips.forEach(function(tooltip){
						this._addClass(tooltip, 'bottom');
						tooltip.style.top = 22 + 'px';
					}.bind(this));
				} else {
					tooltips.forEach(function(tooltip){
						this._addClass(tooltip, 'top');
						tooltip.style.top = -this.tooltip.outerHeight - 14 + 'px';
					}.bind(this));
				}
			}
		};

/*********************************

Attach to global namespace

*********************************/
		if($ && $.fn) {
			let autoRegisterNamespace;

if (!$.fn.slider) {
				$.bridget(NAMESPACE_MAIN, Slider);
				autoRegisterNamespace = NAMESPACE_MAIN;
			}
			else {
				if (windowIsDefined) {
					window.console.warn("bootstrap-slider.js - WARNING: $.fn.slider namespace is already bound. Use the $.fn.bootstrapSlider namespace instead.");
				}
				autoRegisterNamespace = NAMESPACE_ALTERNATE;
			}
			$.bridget(NAMESPACE_ALTERNATE, Slider);

// Auto-Register data-provide="slider" Elements
			$(function() {
				$("input[data-provide=slider]")[autoRegisterNamespace]();
			});
		}

})( $ );

return Slider;
}));
src/sass/_variables.scss000064400000001675151676726750011347 0ustar00$slider-line-height: 20px !default;
$slider-border-radius: 4px !default;
$slider-horizontal-width: 210px !default;
$slider-vertical-height: 210px !default;

// Primary colors
$slider-primary: null !default;
@if variable-exists(brand-primary) {
  $slider-primary: $brand-primary !default;
} @else {
  $slider-primary: #0480BE !default;
}

$slider-primary-top: $slider-primary !default;
$slider-primary-bottom: darken($slider-primary, 5%) !default;
$slider-secondary-top: saturate(lighten($slider-primary, 28%), 20%) !default;
$slider-secondary-bottom: saturate(lighten($slider-primary, 23%), 2%) !default;

// grays for slider channel and disabled states
$slider-gray-1: #BEBEBE !default;
$slider-gray-2: #DFDFDF !default;
$slider-gray-3: #E5E5E5 !default;
$slider-gray-4: #E9E9E9 !default;
$slider-gray-5: #F5F5F5 !default;
$slider-gray-6: #F9F9F9 !default;

// unicode color for demo page
$slider-unicode-color: #726204 !default;src/sass/_mixins.scss000064400000002041151676726750010672 0ustar00@mixin slider_background-image ($colorstart:#F5F5F5, $colorend:#F9F9F9, $backcolor: #F7F7F7) {
  background-color: $backcolor;
  background-image: -moz-linear-gradient(top, $colorstart, $colorend);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($colorstart), to($colorend));
  background-image: -webkit-linear-gradient(top, $colorstart, $colorend);
  background-image: -o-linear-gradient(top, $colorstart, $colorend);
  background-image: linear-gradient(to bottom, $colorstart, $colorend);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$colorstart}', endColorstr='#{$colorend}',GradientType=0);
}
@mixin slider_box-sizing ($value) {
  -webkit-box-sizing: $value;
  -moz-box-sizing: $value;
  box-sizing: $value;
}
@mixin slider_box-shadow ($value...) {
  -webkit-box-shadow: $value;
  -moz-box-shadow: $value;
  box-shadow: $value;
}
@mixin slider_border-radius ($value) {
  -webkit-border-radius: $value;
  -moz-border-radius: $value;
  border-radius: $value;
}src/sass/_rules.scss000064400000014506151676726750010526 0ustar00.slider {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  &.slider-horizontal {
    width: $slider-horizontal-width;
    height: $slider-line-height;
    .slider-track {
      height: $slider-line-height/2;
      width: 100%;
      margin-top: -$slider-line-height/4;
      top:  50%;
      left: 0;
    }
    .slider-selection, .slider-track-low, .slider-track-high {
      height: 100%;
      top: 0;
      bottom: 0;
    }
    .slider-tick,
    .slider-handle {
      margin-left: -$slider-line-height/2;
      &.triangle {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        border-width: 0 $slider-line-height/2 $slider-line-height/2 $slider-line-height/2;
        width: 0;
        height: 0;
        border-bottom-color: $slider-primary-bottom;
        margin-top: 0;
      }
    }
    .slider-tick-container {
      white-space: nowrap;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .slider-tick-label-container {
      white-space: nowrap;
      margin-top: $slider-line-height;
      .slider-tick-label {
        display: inline-block;
        padding-top: $slider-line-height * 1.2;
        text-align: center;
      }
    }
    &.slider-rtl {
      .slider-track {
        left: initial;
        right: 0;
      }
      .slider-tick,
      .slider-handle {
        margin-left: initial;
        margin-right: -$slider-line-height/2;
      }
      .slider-tick-container {
        left: initial;
        right: 0;
      }
    }
  }
  &.slider-vertical {
    height: $slider-vertical-height;
    width: $slider-line-height;
    .slider-track {
      width: $slider-line-height/2;
      height: 100%;
      left: 25%;
      top: 0;
    }
    .slider-selection {
      width: 100%;
      left: 0;
      top: 0;
      bottom: 0;
    }
    .slider-track-low, .slider-track-high {
      width: 100%;
      left: 0;
      right: 0;
    }
    .slider-tick,
    .slider-handle {
      margin-top: -$slider-line-height/2;
      &.triangle {
        border-width: $slider-line-height/2 0 $slider-line-height/2 $slider-line-height/2;
        width:  1px;
        height: 1px;
        border-left-color: $slider-primary-bottom;
        margin-left: 0;
      }
    }
    .slider-tick-label-container {
      white-space: nowrap;
      .slider-tick-label {
        padding-left: $slider-line-height * .2;
      }
    }
    &.slider-rtl {
      .slider-track {
        left: initial;
        right: 25%;
      }
      .slider-selection {
        left: initial;
        right: 0;
      }
      .slider-tick,
      .slider-handle {
        &.triangle {
          border-width: $slider-line-height/2 $slider-line-height/2 $slider-line-height/2 0;
        }
      }
      .slider-tick-label-container {
        .slider-tick-label {
          padding-left: initial;
          padding-right: $slider-line-height * .2;
        }
      }
    }
  }
  &.slider-disabled {
    .slider-handle {
      @include slider_background-image($slider-gray-2, $slider-gray-1, mix($slider-gray-2, $slider-gray-1));
    }
    .slider-track {
      @include slider_background-image($slider-gray-3, $slider-gray-4, mix($slider-gray-3, $slider-gray-4));
      cursor: not-allowed;
    }
  }
  input {
    display: none;
  }
  .tooltip-inner {
    white-space: nowrap;
    max-width: none;
  }
  .tooltip {
    pointer-events: none;

&.top {
      margin-top: -36px;
    }
  }

.tooltip-inner {
    white-space: nowrap;
    max-width: none;
  }

.hide {
    display: none;
  }
}

.slider-track {
  @include slider_background-image($slider-gray-5, $slider-gray-6, mix($slider-gray-5, $slider-gray-6));
  @include slider_box-shadow(inset 0 1px 2px rgba(0,0,0,0.1));
  @include slider_border-radius($slider-border-radius);

position: absolute;
  cursor: pointer;
}

.slider-selection {
  @include slider_background-image($slider-gray-6, $slider-gray-5, mix($slider-gray-6, $slider-gray-5));
  @include slider_box-shadow(inset 0 -1px 0 rgba(0,0,0,0.15));
  @include slider_box-sizing(border-box);
  @include slider_border-radius($slider-border-radius);

position: absolute;
}
.slider-selection.tick-slider-selection {
  @include slider_background-image($slider-secondary-top, $slider-secondary-bottom, mix($slider-secondary-top, $slider-secondary-bottom));
}

.slider-track-low, .slider-track-high {
  @include slider_box-sizing(border-box);
  @include slider_border-radius($slider-border-radius);

position: absolute;
  background: transparent;
}

.slider-handle {
  @include slider_background-image($slider-primary-top, $slider-primary-bottom, mix($slider-primary-top, $slider-primary-bottom));
  @include slider_box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05));

position: absolute;
  top: 0;
  width:  $slider-line-height;
  height: $slider-line-height;
  background-color: $slider-primary;
  border: 0px solid transparent;
  &:hover {
    cursor: pointer;
  }
  &.round {
    @include slider_border-radius($slider-line-height);
  }
  &.triangle {
    background: transparent none;
  }
  &.custom {
    background: transparent none;
    &::before{
      line-height: $slider-line-height;
      font-size: 20px;
      content: '\2605'; //unicode star character
      color: $slider-unicode-color;
    }
  }
}

.slider-tick {
  @include slider_background-image($slider-gray-5, $slider-gray-6, mix($slider-gray-5, $slider-gray-6));
  @include slider_box-shadow(inset 0 -1px 0 rgba(0,0,0,0.15));
  @include slider_box-sizing(border-box);

position: absolute;
  cursor: pointer;
  width: $slider-line-height;
  height: $slider-line-height;
  filter: none;
  opacity: 0.8;
  border: 0px solid transparent;

&.round {
    border-radius: 50%;
  }
  &.triangle {
    background: transparent none;
  }
  &.custom {
    background: transparent none;
    &::before {
      line-height: $slider-line-height;
      font-size: 20px;
      content: '\2605'; //unicode star character
      color: $slider-unicode-color;
    }
  }
  &.in-selection {
    @include slider_background-image($slider-secondary-top, $slider-secondary-bottom, mix($slider-secondary-top, $slider-secondary-bottom));
    opacity: 1;
  }
}
src/sass/bootstrap-slider.scss000064400000003216151676726750012526 0ustar00/*! =========================================================
 * bootstrap-slider.js
 *
 * Maintainers:
 *		Kyle Kemp
 *			- Twitter: @seiyria
 *			- Github:  seiyria
 *		Rohit Kalkur
 *			- Twitter: @Rovolutionary
 *			- Github:  rovolution
 *
 * =========================================================
 *
 * bootstrap-slider is released under the MIT License
 * Copyright (c) 2017 Kyle Kemp, Rohit Kalkur, and contributors
 * 
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:
 * 
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 *
 * ========================================================= */

@import "variables";
@import "mixins";
@import "rules";src/less/rules.less000064400000013033151676726750010351 0ustar00.slider {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	&.slider-horizontal {
		width: @slider-horizontal-width;
		height: @slider-line-height;
		.slider-track {
			height: (@slider-line-height/2);
			width: 100%;
			margin-top: (-@slider-line-height/4);
			top: 50%;
			left: 0;
		}
		.slider-selection, .slider-track-low, .slider-track-high {
			height: 100%;
			top: 0;
			bottom: 0;
		}
		.slider-tick,
		.slider-handle {
			margin-left: (-@slider-line-height/2);
			&.triangle {
				position: relative;
				top: 50%;
				-ms-transform: translateY(-50%);
				transform: translateY(-50%);
				border-width: 0 (@slider-line-height/2) (@slider-line-height/2) (@slider-line-height/2);
				width: 0;
				height: 0;
				border-bottom-color: @slider-primary-bottom;
				margin-top: 0;
			}
		}
		.slider-tick-container {
			white-space: nowrap;
			position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
		}
		.slider-tick-label-container {
			white-space: nowrap;
			margin-top: @slider-line-height;

.slider-tick-label {
				padding-top: @slider-line-height * .2;
				display: inline-block;
				text-align: center;
			}
		}
		.tooltip {
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
		}
		&.slider-rtl {
			.slider-track {
				left: initial;
				right: 0;
			}
			.slider-tick,
			.slider-handle {
				margin-left: initial;
				margin-right: (-@slider-line-height/2);
			}
			.slider-tick-container {
				left: initial;
				right: 0;
			}
			.tooltip {
				-ms-transform: translateX(+50%);
				transform: translateX(+50%);
			}
		}
	}
	&.slider-vertical {
		height: @slider-vertical-height;
		width: @slider-line-height;
		.slider-track {
			width: (@slider-line-height/2);
			height: 100%;
			left: 25%;
			top: 0;
		}
		.slider-selection {
			width: 100%;
			left: 0;
			top: 0;
			bottom: 0;
		}
		.slider-track-low, .slider-track-high {
			width: 100%;
			left: 0;
			right: 0;
		}
		.slider-tick,
		.slider-handle {
			margin-top: (-@slider-line-height/2);
			&.triangle {
				border-width: (@slider-line-height/2) 0 (@slider-line-height/2) (@slider-line-height/2);
				width: 1px;
				height: 1px;
				border-left-color: @slider-primary-bottom;
				border-right-color: @slider-primary-bottom;
				margin-left: 0;
				margin-right: 0;
			}
		}
		.slider-tick-label-container {
			white-space: nowrap;

.slider-tick-label {
				padding-left: @slider-line-height * .2;
			}
		}
		.tooltip {
			-ms-transform: translateY(-50%);
			transform: translateY(-50%);
		}
		&.slider-rtl {
			.slider-track {
				left: initial;
				right: 25%;
			}
			.slider-selection {
				left: initial;
				right: 0;
			}
			.slider-tick,
			.slider-handle {
				&.triangle {
					border-width: (@slider-line-height/2) (@slider-line-height/2) (@slider-line-height/2) 0;
				}
			}
			.slider-tick-label-container {
				.slider-tick-label {
					padding-left: initial;
					padding-right: @slider-line-height * .2;
				}
			}
		}
	}
	&.slider-disabled {
		.slider-handle {
			#gradient > .vertical(@slider-gray-2, @slider-gray-1);
		}
		.slider-track {
			#gradient > .vertical(@slider-gray-3, @slider-gray-4);
			cursor: not-allowed;
		}
	}
	input {
		display: none;
	}
	.tooltip {
		pointer-events: none;
		&.top {
			margin-top: -36px;
		}
	}
	.tooltip-inner {
		white-space: nowrap;
		max-width: none;
	}
	.hide {
		display: none;
	}
}
.slider-track {
	position: absolute;
	cursor: pointer;
	#gradient > .vertical(@slider-gray-5, @slider-gray-6);
	.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
	border-radius: @border-radius-base;
}
.slider-selection {
	position: absolute;
	#gradient > .vertical(@slider-gray-6, @slider-gray-5);
	.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
	.box-sizing(border-box);
	border-radius: @border-radius-base;
}
.slider-selection.tick-slider-selection {
	#gradient > .vertical(@slider-secondary-top, @slider-secondary-bottom);
}
.slider-track-low, .slider-track-high {
	position: absolute;
	background: transparent;
	.box-sizing(border-box);
	border-radius: @border-radius-base;
}
.slider-handle {
	position: absolute;
	top: 0;
	width: @slider-line-height;
	height: @slider-line-height;
	background-color: @slider-primary;
	#gradient > .vertical(@slider-primary-top, @slider-primary-bottom);
	filter: none;
	.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
	border: 0px solid transparent;
	&:hover {
		cursor: pointer;
	}
	&.round {
		border-radius: 50%;
	}
	&.triangle {
		background: transparent none;
	}
	&.custom {
		background: transparent none;
		&::before{
			line-height: @slider-line-height;
			font-size: 20px;
			content: '\2605'; //unicode star character
			color: @slider-unicode-color;
		}
	}
}
.slider-tick {
	position: absolute;
	cursor: pointer;
	width: @slider-line-height;
	height: @slider-line-height;
	#gradient.vertical(@slider-gray-6, @slider-gray-5);
	.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
	.box-sizing(border-box);
	filter: none;
	opacity: 0.8;
	border: 0px solid transparent;
	&.round {
		border-radius: 50%;
	}
	&.triangle {
		background: transparent none;
	}
	&.custom {
		background: transparent none;
		&::before{
			line-height: @slider-line-height;
			font-size: 20px;
			content: '\2605'; //unicode star character
			color: @slider-unicode-color;
		}
	}
	&.in-selection {
		#gradient > .vertical(@slider-secondary-top, @slider-secondary-bottom);
		opacity: 1;
	}
}
src/less/bootstrap-slider.less000064400000003543151676726750012521 0ustar00/*! =========================================================
 * bootstrap-slider.js
 *
 * Maintainers:
 *		Kyle Kemp
 *			- Twitter: @seiyria
 *			- Github:  seiyria
 *		Rohit Kalkur
 *			- Twitter: @Rovolutionary
 *			- Github:  rovolution
 *
 * =========================================================
  *
 * bootstrap-slider is released under the MIT License
 * Copyright (c) 2017 Kyle Kemp, Rohit Kalkur, and contributors
 * 
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:
 * 
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 *
 * ========================================================= */

@import '../../node_modules/bootstrap/less/variables.less'; // Bootstrap variables
@import '../../node_modules/bootstrap/less/mixins.less';    // Bootstrap mixins

@import 'variables.less'; // slider-specific variables
@import 'rules.less'; // slider-specific rulessrc/less/variables.less000064400000001411151676726750011164 0ustar00@slider-line-height: @line-height-computed;
@slider-horizontal-width: 210px;
@slider-vertical-height: 210px;

// Primary colors
// @brand-primary is set in ../../node_modules/bootstrap/less/variables.less and evaluates to #337ab7
@slider-primary: @brand-primary;
@slider-primary-top: @slider-primary;
@slider-primary-bottom: darken(@slider-primary, 5%);
@slider-secondary-top: saturate(lighten(@slider-primary, 28%), 20%);
@slider-secondary-bottom: saturate(lighten(@slider-primary, 23%), 2%);

// grays for slider channel and disabled states
@slider-gray-1: #BEBEBE;
@slider-gray-2: #DFDFDF;
@slider-gray-3: #E5E5E5;
@slider-gray-4: #E9E9E9;
@slider-gray-5: #F5F5F5;
@slider-gray-6: #F9F9F9;

// unicode color for demo page
@slider-unicode-color: #726204;package.json000064400000007170151676726750007065 0ustar00{
  "_args": [
    [
      "bootstrap-slider@10.3.2",
      "C:\\Users\\Ovi-PC\\Downloads\\themekit-master\\themekit"
    ]
  ],
  "_from": "bootstrap-slider@10.3.2",
  "_id": "bootstrap-slider@10.3.2",
  "_inBundle": false,
  "_integrity": "sha512-81SOegSEW+0lPng/jsaUeFbQ8IcuGNSdkaOXOpu+hGp02A0XyfAAjg3dTAZ++Im4Ik8V2R04KOYuihG0S1t5TA==",
  "_location": "/bootstrap-slider",
  "_phantomChildren": {},
  "_requested": {
    "type": "version",
    "registry": true,
    "raw": "bootstrap-slider@10.3.2",
    "name": "bootstrap-slider",
    "escapedName": "bootstrap-slider",
    "rawSpec": "10.3.2",
    "saveSpec": null,
    "fetchSpec": "10.3.2"
  },
  "_requiredBy": [
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/bootstrap-slider/-/bootstrap-slider-10.3.2.tgz",
  "_spec": "10.3.2",
  "_where": "C:\\Users\\Ovi-PC\\Downloads\\themekit-master\\themekit",
  "author": {
    "name": "bootstrap-slider"
  },
  "bugs": {
    "url": "http://github.com/seiyria/bootstrap-slider/issues"
  },
  "contributors": [
    {
      "name": "Kyle Kemp"
    },
    {
      "name": "Rohit Kalkur"
    }
  ],
  "dependencies": {},
  "description": "Slider view component for Twitter Bootstrap.",
  "devDependencies": {
    "babel-preset-es2015": "6.3.13",
    "bootstrap": "^3.3.6",
    "grunt": "^0.4.5",
    "grunt-babel": "6.0.0",
    "grunt-bump": "0.0.16",
    "grunt-contrib-clean": "0.6.0",
    "grunt-contrib-connect": "0.5.0",
    "grunt-contrib-jasmine": "1.0.3",
    "grunt-contrib-jshint": "0.11.3",
    "grunt-contrib-less": "0.7.0",
    "grunt-contrib-uglify": "0.2.4",
    "grunt-contrib-watch": "0.5.3",
    "grunt-header": "1.0.0",
    "grunt-lesslint": "^3.2.0",
    "grunt-open": "0.2.2",
    "grunt-sass-lint": "^0.2.2",
    "grunt-template": "0.2.0"
  },
  "engine": {},
  "gitHead": "67eb8fe3c26205efc94ae95b3ef37a469eef0b81",
  "gruntConfig": {
    "devPort": 9000,
    "js": {
      "highlightjs": "dependencies/js/highlight.min.js",
      "modernizr": "dependencies/js/modernizr.js",
      "jquery": "dependencies/js/jquery.min.js",
      "bindPolyfill": "test/phantom_bind_polyfill.js",
      "slider": "src/js/bootstrap-slider.js"
    },
    "less": {
      "slider": "src/less/bootstrap-slider.less",
      "rules": "src/less/rules.less",
      "variables": "src/less/variables.less"
    },
    "css": {
      "bootstrap": "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "highlightjs": "dependencies/css/highlightjs-github-theme.css"
    },
    "tpl": {
      "SpecRunner": "tpl/SpecRunner.tpl",
      "index": "tpl/index.tpl"
    },
    "temp": {
      "js": "temp/bootstrap-slider.js",
      "jsMin": "temp/bootstrap-slider.min.js",
      "css": "temp/bootstrap-slider.css",
      "cssMin": "temp/bootstrap-slider.min.css"
    },
    "dist": {
      "js": "dist/bootstrap-slider.js",
      "jsMin": "dist/bootstrap-slider.min.js",
      "css": "dist/css/bootstrap-slider.css",
      "cssMin": "dist/css/bootstrap-slider.min.css"
    },
    "spec": "test/specs/**/*.js"
  },
  "homepage": "http://github.com/seiyria/bootstrap-slider",
  "keywords": [
    "slider",
    "bootstrap",
    "twitter",
    "slide"
  ],
  "license": "MIT",
  "main": "dist/bootstrap-slider.js",
  "name": "bootstrap-slider",
  "repository": {
    "type": "git",
    "url": "git://github.com/seiyria/bootstrap-slider.git"
  },
  "scripts": {
    "pretest": "grunt lint",
    "release": "sh ./scripts/release.sh",
    "test": "grunt test",
    "update-gh-pages": "sh ./scripts/update-gh-pages.sh"
  },
  "style": "dist/css/bootstrap-slider.css",
  "version": "10.3.2"
}
composer.json000064400000002077151676726750007322 0ustar00{
    "name": "seiyria/bootstrap-slider",
    "type": "library",
    "version": "10.3.2",
    "description": "A less buggy fork of the original bootstrap slider found on http://www.eyecon.ro/ by Stefan Petre. It was forked so we could update the slider since the original wasn't under version control.",
    "keywords": ["slider", "css", "bootstrap", "javascript"],
    "homepage": "https://github.com/seiyria/bootstrap-slider",
    "require": {},
    "license": "MIT",
    "authors": [
        {
            "name": "Kyle Kemp",
            "email": "kyle@seiyria.com",
            "homepage": "http://seiyria.com",
            "role": "Developer"
        },
        {
            "name": "Rohit Kalkur",
            "email": "rohit.kalkur@gmail.com",
            "homepage": "http://www.rovolutionary.com",
            "role": "Developer"
        },
        {
            "name": "Lucas Zardo",
            "email": "lucas@deliverymuch.com.br",
            "homepage": "https://deliverymuch.com.br",
            "role": "Packagist Editor"
        }
    ]
}.travis.yml000064400000000161151676726750006701 0ustar00language: node_js
node_js:
  - "5.1.1"
before_install:
  - npm install -g grunt-cli bower
  - npm install 
test/specs/LogarithmicScaleSpec.js000064400000004466151676726750013263 0ustar00
/*
	*************************

Logarithmic Scale Tests

*************************

*/
describe("Slider with logarithmic scale tests", function() {

var testSlider;

describe("Should properly position the slider", function() {

function testSliderPosition(min, max, value){
			testSlider = $("#testSlider1").slider({
    			min: min,
    			max: max,
    			scale: 'logarithmic',
    			value: value // This should be at 50%
    		});
			var expectedPostition = 210 / 2 + 'px';
			var handle = $("#testSlider1").siblings('div.slider').find('.min-slider-handle');
			expect(handle.css('left')).toBe(expectedPostition);
		}

it("with positive values", function() {
			testSliderPosition(1, 10000, 100);
    	});

it("with zero", function() {
			testSliderPosition(0, 63, 7);
        });

it("with a negative value", function() {
			testSliderPosition(-7, 56, 0);
        });
    });

it("Should properly position the tick marks", function() {
		testSlider = $("#testSlider1").slider({
			min: 1,
			max: 100,
			scale: 'logarithmic',
			ticks: [1,10,20,50,100]
		});

// Position expected for the '10' tick
		var expectedTickOnePosition = 210 / 2 + 'px'; //should be at 50%

var handle = $("#testSlider1").siblings('div.slider').find(".slider-tick").eq(1);
		expect(handle.css('left')).toBe(expectedTickOnePosition);
	});

it("Should use step size when navigating the keyboard", function() {
		testSlider = $("#testSlider1").slider({
			min: 1,
			max: 10000,
			scale: 'logarithmic',
			value: 100,
			step: 5
		});

// Focus on handle1
		var handle1 = $("#testSlider1").siblings('div.slider:first').find('.slider-handle');
		handle1.focus();

// Create keyboard event
		var keyboardEvent = document.createEvent("Events");
		keyboardEvent.initEvent("keydown", true, true);

var keyPresses = 0;
		handle1.on("keydown", function() {
			keyPresses++;
			var value = $("#testSlider1").slider('getValue');
			expect(value).toBe(100 + keyPresses*5);
		});

keyboardEvent.keyCode = keyboardEvent.which = 39; // RIGHT
		for (var i = 0; i < 5; i++) {
			handle1[0].dispatchEvent(keyboardEvent);
		}
	});

afterEach(function() {
	    if(testSlider) {
	      testSlider.slider('destroy');
	      testSlider = null;
	    }
  	});
});
test/specs/AriaValueTextFormatterSpec.js000064400000004671151676726750014451 0ustar00describe("Aria-valuetext Tests", function() {
      it("Sets the aria-valuetext to 'formatter' value", function() {
      var textValArrayA = new Array('Monday','Wednesday','Friday');
      var tooltipFormatterA = function(value) {
        var arrActiveValueA = value;
        return textValArrayA[arrActiveValueA-1];
      };
      
      //Formatter is used
      var testSliderA = $("#accessibilitySliderA").slider({
        formatter : tooltipFormatterA
      });
      testSliderA.slider('setValue', 2);
      
      var tooltipMessageA = $("#accessibilitySliderA").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
      var expectedMessageA = tooltipFormatterA(2);
      expect(tooltipMessageA).toBe(expectedMessageA);
     
    });
    
    it("Does not use aria-valuetext if 'formatter' is not used", function() {
    	  
      //Formatter is not used  
      var testSliderB = $("#accessibilitySliderB").slider({});
      testSliderB.slider('setValue', 1);
    
      var ariaValueTextB = $("#accessibilitySliderB").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
      expect(ariaValueTextB).not.toBeDefined();
    });
    
    it("aria-valuetext if 'formatter' is used and has min & max value", function() {
      var textValArrayC = new Array('Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday');
      var tooltipFormatterC = function(value) {
          if(value[1]){
            var arrActiveValueC0 = value[0];
            var arrActiveValueC1 = value[1];  
            return [ textValArrayC[arrActiveValueC0-1], textValArrayC[arrActiveValueC1-1] ];
          } else {
          	var arrActiveValueC = value;
  			return textValArrayC[arrActiveValueC-1];
          }
      };
      
      //Formatter is used for ranges
      var testSliderC = $("#accessibilitySliderC").slider({
        range: true,
        formatter : tooltipFormatterC
      });
      var valuesToSet = [2,4];
      testSliderC.slider('setValue', valuesToSet);
      var expectedMessageC = tooltipFormatterC([2,4]);
      var ttminMessage = $("#accessibilitySliderC").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
      var ttmaxMessage = $("#accessibilitySliderC").prev(".slider").children(".max-slider-handle").attr("aria-valuetext");
      expect(ttminMessage).toBe(expectedMessageC[0]);
      expect(ttmaxMessage).toBe(expectedMessageC[1]);
    });
});
test/specs/AccessibilitySpec.js000064400000006665151676726750012643 0ustar00describe("Accessibility Tests", function() {
  var sliderA;
  var sliderB;

it("Should have the slider role", function() {
    sliderA = $('#accessibilitySliderA').slider();
    sliderB = $('#accessibilitySliderB').slider();
    var $sliderElementA = $(sliderA.slider('getElement'));
    var $sliderElementB = $(sliderB.slider('getElement'));

expect($sliderElementA.find('.min-slider-handle').attr('role')).toBe('slider');
    expect($sliderElementB.find('.min-slider-handle').attr('role')).toBe('slider');
    expect($sliderElementB.find('.max-slider-handle').attr('role')).toBe('slider');

expect($sliderElementA.find('.tooltip-main').attr('role')).toBe('presentation');
    expect($sliderElementA.find('.tooltip-min').attr('role')).toBe('presentation');
    expect($sliderElementA.find('.tooltip-max').attr('role')).toBe('presentation');
  });

it('Should have an aria-labelledby attribute', function() {
    sliderA = $('#accessibilitySliderA').slider();
    sliderB = $('#accessibilitySliderB').slider();

expect($(sliderA.slider('getElement')).find('.min-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelA');
    expect($(sliderB.slider('getElement')).find('.min-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelA');
    expect($(sliderB.slider('getElement')).find('.max-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelB');
  });

it('Should have an aria-valuemax and aria-valuemin value', function() {
    sliderA = $('#accessibilitySliderA').slider({ min: 5, max: 10 });
    sliderB = $('#accessibilitySliderB').slider({ min: 5, max: 10 });
    var $sliderElementA = $(sliderA.slider('getElement'));
    var $sliderElementB = $(sliderB.slider('getElement'));

expect($sliderElementA.find('.min-slider-handle').attr('aria-valuemin')).toBe('5');
    expect($sliderElementA.find('.min-slider-handle').attr('aria-valuemax')).toBe('10');
    expect($sliderElementB.find('.min-slider-handle').attr('aria-valuemin')).toBe('5');
    expect($sliderElementB.find('.min-slider-handle').attr('aria-valuemax')).toBe('10');
    expect($sliderElementB.find('.max-slider-handle').attr('aria-valuemin')).toBe('5');
    expect($sliderElementB.find('.max-slider-handle').attr('aria-valuemax')).toBe('10');
  });

it('Should have an aria-valuenow with the current value', function() {
    sliderA = $('#accessibilitySliderA').slider({ min: 5, value: 7 });
    sliderB = $('#accessibilitySliderB').slider({ min: 5, value: [2, 8] });
    var $sliderElementA = $(sliderA.slider('getElement'));
    var $sliderElementB = $(sliderB.slider('getElement'));

expect($sliderElementA.find('.min-slider-handle').attr('aria-valuenow')).toBe('7');
    expect($sliderElementB.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
    expect($sliderElementB.find('.max-slider-handle').attr('aria-valuenow')).toBe('8');

// Change the value and check if aria-valuenow is still the same
    sliderA.slider('setValue', 1);
    sliderB.slider('setValue', [4, 9]);

expect($sliderElementA.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
    expect($sliderElementB.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
    expect($sliderElementB.find('.max-slider-handle').attr('aria-valuenow')).toBe('9');
  });

afterEach(function() {
    if(sliderA) { sliderA.slider('destroy'); }
    if(sliderB) { sliderB.slider('destroy'); }
  });

});
test/specs/FocusOptionSpec.js000064400000003077151676726750012316 0ustar00/*
  ******************

Focus Option Tests

******************

This spec has tests for checking proper behavior of the focus option.
*/

describe("Focus Option Tests", function() {

var testSlider;

var simulateMousedown = function(target, pos) {
    var myEvent = document.createEvent("MouseEvents");
    myEvent.initEvent("mousedown", true, true);
    myEvent.pageX = pos;
    myEvent.pageY = pos;
    target.dispatchEvent(myEvent);
  };

it("handle should not be focused after value change when 'focus' is false", function() {
    testSlider = $("#testSlider1").slider({
      min  : 0,
      max  : 10,
      value: 0,
      focus: false,
      id   : "testSlider"
    });

var hasFocus;
    $("#testSlider").find(".min-slider-handle").focus(function() {
      hasFocus = true;
    });

simulateMousedown($("#testSlider").find(".slider-track-high").get(0), 1000);

expect(hasFocus).toBe(undefined);
  });

it("handle should be focused after value change when 'focus' is true", function() {
    testSlider = $("#testSlider1").slider({
      min  : 0,
      max  : 10,
      value: 0,
      focus: true,
      id   : "testSlider"
    });

var hasFocus;
    $("#testSlider").find(".min-slider-handle").focus(function() {
      hasFocus = true;
    });

simulateMousedown($("#testSlider").find(".slider-track-high").get(0), 1000);

expect(hasFocus).toBe(true);
  });

afterEach(function() {
    if (testSlider) {
      testSlider.slider("destroy");
      testSlider = null;
    }
  });
});
test/specs/KeyboardSupportSpec.js000064400000036722151676726750013206 0ustar00describe("Keyboard Support Tests", function() {
  var testSlider,
      handle1,
      handle2,
      keyboardEvent,
      initialMinVal = 0,
      initialMaxVal = 10,
      initialStepVal = 1,
      initialSliderVal = 5;

/*
    Before/After setup
  */
  beforeEach(function() {
    // Create keyboard event
    keyboardEvent = document.createEvent("Events");
    keyboardEvent.initEvent("keydown", true, true);
  });

afterEach(function() {
    if(testSlider) { testSlider.slider('destroy'); }
    keyboardEvent = null;
    keyboardEvent = null;
  });

/*
    Begin Tests
  */
  describe("Clicking on slider handle automatically gives it focus", function() {
    
    beforeEach(function() {
      testSlider = $("#testSlider1").slider({
        id: 'testSlider'
      });
      handle1 = $("#testSlider").find(".slider-handle:first");
    });

it("clicking on handle1 gives focus to handle1", function(done) {
      handle1.focus(function() {
        expect(true).toBeTruthy();
        done();
      });
      handle1.focus();
    });
  });

describe("When slider handle has TAB focus", function() {

it("should display it's tooltip if 'tooltip' option is set to 'show'", function() {
      testSlider = $("#testSlider1").slider({
        id: 'testSlider',
        tooltip: 'show'
      });
      handle1 = $("#testSlider").find(".slider-handle:first");

// Check for no tooltip before focus
      var tooltipIsShown = $("#testSlider").find("div.tooltip").hasClass("in");
      expect(tooltipIsShown).toBeFalsy();
      
      handle1.focus();

// Tooltip should be present after focus
      tooltipIsShown = $("#testSlider").find("div.tooltip").hasClass("in");
      expect(tooltipIsShown).toBeTruthy();
    });

it("should not display it's tooltip if 'tooltip' option is set to 'hide'", function() {
      testSlider = $("#testSlider1").slider({
        id: 'testSlider',
        tooltip: 'hide'
      });
      handle1 = $("#testSlider").find(".slider-handle:first");

// Check for hidden tooltip before focus
      var tooltipIsHidden = $("#testSlider").children("div.tooltip").hasClass("hide");
      expect(tooltipIsHidden).toBeTruthy();
      
      handle1.focus();

// Tooltip should remain hidden after focus
      tooltipIsHidden = $("#testSlider").children("div.tooltip").hasClass("hide");
      expect(tooltipIsHidden).toBeTruthy();
    });

it("should not affect the tooltip display if 'tooltip' option is set to 'always'", function() {
      testSlider = $("#testSlider1").slider({
        id: 'testSlider',
        tooltip: 'always'
      });
      handle1 = $("#testSlider").find(".slider-handle:first");
      var $tooltip = $("#testSlider").children("div.tooltip");

// Check for shown tooltip before focus
      var tooltipIsShown = $tooltip.hasClass("in");
      expect(tooltipIsShown).toBeTruthy();
      
      handle1.focus();

// Tooltip should remain present after focus
      tooltipIsShown = $tooltip.hasClass("in");
      expect(tooltipIsShown).toBeTruthy();
    });
  });

describe("For horizontal sliders where its handle has focus", function() {

beforeEach(function() {
      // Initialize the slider
      testSlider = $("#testSlider1").slider({
        id: 'testSlider',
        orientation: 'horizontal',
        min: initialMinVal,
        max: initialMaxVal,
        step: initialStepVal,
        value: initialSliderVal
      });
      // Focus on handle1
      handle1 = $("#testSlider .min-slider-handle");
      handle1.focus();
    });

it("moves to the left by the 'step' value when the LEFT arrow key is pressed", function(done) {
      handle1.on("keydown", function() {
        var sliderValue = $("#testSlider1").slider('getValue');
        var expectedSliderValue = initialSliderVal - initialStepVal;
        
        expect(sliderValue).toBe(expectedSliderValue);

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 37;
      handle1[0].dispatchEvent(keyboardEvent);
    });

it("moves to the right by the 'step' value when the RIGHT arrow key is pressed", function(done) {
      handle1.on("keydown", function() {
        var sliderValue = $("#testSlider1").slider('getValue');
        var expectedSliderValue = initialSliderVal + initialStepVal;
        
        expect(sliderValue).toBe(expectedSliderValue);

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 39;
      handle1[0].dispatchEvent(keyboardEvent);
    });

it("moves to the left by the 'step' value when the DOWN arrow key is pressed", function(done) {
      handle1.on("keydown", function() {
        var sliderValue = testSlider.slider('getValue');
        var expectedSliderValue = initialSliderVal - initialStepVal;
        
        expect(sliderValue).toBe(expectedSliderValue);

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 40;
      handle1[0].dispatchEvent(keyboardEvent);
    });

it("moves to the right by the 'step' value when the UP arrow key is pressed", function(done) {
      handle1.on("keydown", function() {
        var sliderValue = testSlider.slider('getValue');
        var expectedSliderValue = initialSliderVal + initialStepVal;
        
        expect(sliderValue).toBe(expectedSliderValue);

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 38;
      handle1[0].dispatchEvent(keyboardEvent);
    });
  });

describe("For vertical sliders where its handle has focus", function() {
    
    beforeEach(function() {
      // Initialize the slider
      testSlider = $("#testSlider1").slider({
        id: 'testSlider',
        orientation: 'vertical',
        min: initialMinVal,
        max: initialMaxVal,
        step: initialStepVal,
        value: initialSliderVal
      });
      // Focus on handle1
      handle1 = $("#testSlider").find(".slider-handle:first");
      handle1.focus();
    });

it("moves down by the 'step' value when the LEFT arrow key is pressed", function(done) {
      handle1.on("keydown", function() {
        var sliderValue = testSlider.slider('getValue');
        var expectedSliderValue = initialSliderVal - initialStepVal;
        
        expect(sliderValue).toBe(expectedSliderValue);

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 37;
      handle1[0].dispatchEvent(keyboardEvent);
    });

it("moves up by the 'step' value when the RIGHT arrow key is pressed", function(done) {
      handle1.on("keydown", function() {
        var sliderValue = testSlider.slider('getValue');
        var expectedSliderValue = initialSliderVal + initialStepVal;
        
        expect(sliderValue).toBe(expectedSliderValue);

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 39;
      handle1[0].dispatchEvent(keyboardEvent);
    });

it("moves down by the 'step' value when the DOWN arrow key is pressed", function(done) {
      handle1.on("keydown", function() {
        var sliderValue = testSlider.slider('getValue');
        var expectedSliderValue = initialSliderVal - initialStepVal;
        
        expect(sliderValue).toBe(expectedSliderValue);

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 40;
      handle1[0].dispatchEvent(keyboardEvent);
    });

it("moves up by the 'step' value when the UP arrow key is pressed", function(done) {
      handle1.on("keydown", function() {
        var sliderValue = testSlider.slider('getValue');
        var expectedSliderValue = initialSliderVal + initialStepVal;
        
        expect(sliderValue).toBe(expectedSliderValue);

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 38;
      handle1[0].dispatchEvent(keyboardEvent);
    });
  });

describe("For a reversed slider (regardless of 'orientation')", function() {
      
    beforeEach(function() {
      // Initialize the slider
      testSlider = $("#testSlider1").slider({
        id: 'testSlider',
        reversed: true,
        min: initialMinVal,
        max: initialMaxVal,
        step: initialStepVal,
        value: initialSliderVal
      });
      // Focus on handle1
      handle1 = $("#testSlider").find(".slider-handle:first");
      handle1.focus();
    });

it("moves to the left by the 'step' value when the LEFT arrow key is pressed", function(done) {
      handle1.on("keydown", function() {
        var sliderValue = testSlider.slider('getValue');
        var expectedSliderValue = initialSliderVal - initialStepVal;
        
        expect(sliderValue).toBe(expectedSliderValue);

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 37;
      handle1[0].dispatchEvent(keyboardEvent);
    });

it("moves to the right by the 'step' value when the RIGHT arrow key is pressed", function(done) {
      handle1.on("keydown", function() {
        var sliderValue = testSlider.slider('getValue');
        var expectedSliderValue = initialSliderVal + initialStepVal;
        
        expect(sliderValue).toBe(expectedSliderValue);

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 39;
      handle1[0].dispatchEvent(keyboardEvent);
    });

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 40;
      handle1[0].dispatchEvent(keyboardEvent);
    });

done();
      });

keyboardEvent.keyCode = keyboardEvent.which = 38;
      handle1[0].dispatchEvent(keyboardEvent);
    });
  });

describe("For a range slider (regardless of 'orientation')", function() {
    
    beforeEach(function() {
      // Initialize the slider
      testSlider = $("#testSlider1").slider({
        id: 'testSlider',
        min: initialMinVal,
        max: initialMaxVal,
        step: initialStepVal,
        value: [initialSliderVal, initialSliderVal]
      });
    });

describe("when handle1 tries to overtake handle2 from the left", function() {
      beforeEach(function() {
        handle1 = $("#testSlider").find(".slider-handle:first");
        handle1.focus();
      });

it("handle2 moves to the right by the step value", function(done) {
        handle1.on("keydown", function() {
          var sliderValue = testSlider.slider('getValue');
          var expectedSliderValue = initialSliderVal + initialStepVal;
          
          expect(sliderValue[1]).toBe(expectedSliderValue);

done();
        });

keyboardEvent.keyCode = keyboardEvent.which = 39;
        handle1[0].dispatchEvent(keyboardEvent);
      });

it("handle1's value remains unchanged", function(done) {
        var sliderValue = testSlider.slider('getValue');

handle1.on("keydown", function() {
          expect(sliderValue[0]).toBe(initialSliderVal);
          done();
        });

keyboardEvent.keyCode = keyboardEvent.which = 39;
        handle1[0].dispatchEvent(keyboardEvent);
      });
    });

describe("when handle2 tries to overtake handle1 from the right", function() {
      beforeEach(function() {
        handle2 = $("#testSlider").find(".slider-handle:last");
        handle2.focus();
      });

it("handle1 moves to the left by the step value", function(done) {
        handle2.on("keydown", function() {
          var sliderValue = testSlider.slider('getValue');
          var expectedSliderValue = initialSliderVal - initialStepVal;
          
          expect(sliderValue[0]).toBe(expectedSliderValue);

done();
        });

keyboardEvent.keyCode = keyboardEvent.which = 37;
        handle2[0].dispatchEvent(keyboardEvent);
      });

it("handle2's value remains unchanged", function(done) {
        var sliderValue = testSlider.slider('getValue');

handle2.on("keydown", function() {
          expect(sliderValue[1]).toBe(initialSliderVal);
          done();
        });

keyboardEvent.keyCode = keyboardEvent.which = 37;
        handle2[0].dispatchEvent(keyboardEvent);
      });
    });
  });

describe("For the natural arrow keys", function() {
    var testCases = [{
      reversed: false,
      keyEvent: 37,
      expectedSliderValue: initialSliderVal - initialStepVal,
      orientation: 'horizontal',
      key: 'left'
    }, {
      reversed: true,
      keyEvent: 37,
      expectedSliderValue: initialSliderVal + initialStepVal,
      orientation: 'horizontal',
      key: 'left'
    }, {
      reversed: false,
      keyEvent: 39,
      expectedSliderValue: initialSliderVal + initialStepVal,
      orientation: 'horizontal',
      key: 'right'
    }, {
      reversed: true,
      keyEvent: 39,
      expectedSliderValue: initialSliderVal - initialStepVal,
      orientation: 'horizontal',
      key: 'right'
    }, {
      reversed: false,
      keyEvent: 38,
      expectedSliderValue: initialSliderVal - initialStepVal,
      orientation: 'vertical',
      key: 'up'
    }, {
      reversed: true,
      keyEvent: 38,
      expectedSliderValue: initialSliderVal + initialStepVal,
      orientation: 'vertical',
      key: 'up'
    }, {
      reversed: false,
      keyEvent: 40,
      expectedSliderValue: initialSliderVal + initialStepVal,
      orientation: 'vertical',
      key: 'down'
    }, {
      reversed: true,
      keyEvent: 40,
      expectedSliderValue: initialSliderVal - initialStepVal,
      orientation: 'vertical',
      key: 'down'
    }];
    testCases.forEach(function(testCase) {
      describe("A"+((testCase.reversed)? " reversed" : "")+testCase.orientation+" slider is used for the arrow keys", function() {
        beforeEach(function() {
          // Initialize the slider
          testSlider = $("#testSlider1").slider({
            id: 'testSlider',
            min: initialMinVal,
            max: initialMaxVal,
            step: initialStepVal,
            value: initialSliderVal,
            natural_arrow_keys: true,
            reversed: testCase.reversed,
            orientation: testCase.orientation
          });
          handle1 = $("#testSlider").find(".slider-handle:first");
          handle1.focus();
        });

it("moves to the "+testCase.key+" by the 'step' value when the "+testCase.key+" arrow key is pressed", function(done) {
          handle1.on("keydown", function() {
            var sliderValue = testSlider.slider('getValue');
            var expectedSliderValue = testCase.expectedSliderValue;

expect(sliderValue).toBe(expectedSliderValue);

done();
          });

keyboardEvent.keyCode = keyboardEvent.which = testCase.keyEvent;
          handle1[0].dispatchEvent(keyboardEvent);
        });
      });
    });
  });
});test/specs/offMethodSpec.js000064400000001635151676726750011757 0ustar00//--------------------------------------------------
//--------------------------------------------------
//-- Removes attached function from slider event  --
//--------------------------------------------------
//--------------------------------------------------

describe("'off()' test", function() {
    var testSlider, eventHandlerTriggered, mouse;

var onStart = function(){
        eventHandlerTriggered = true;
    };

beforeEach(function() {
        eventHandlerTriggered = false;
        mouse = document.createEvent('MouseEvents');
    });

it("should properly unbind an event listener", function() {
        testSlider = $("#testSlider1").slider();

testSlider.on('slideStart', onStart);
        testSlider.off('slideStart', onStart);

testSlider.data('slider')._mousedown(mouse);

expect(eventHandlerTriggered).not.toBeTruthy();
    });
});test/specs/RefreshMethodSpec.js000064400000001604151676726750012577 0ustar00describe("refresh() Method Tests", function() {
  var testSlider;

afterEach(function() {
    if(testSlider) {
      testSlider.destroy();
    }
  });

it("does not convert a non-range slider into a range slider when invoked", function() {
  	// Initialize non-range slider
  	testSlider = new Slider("#testSlider1", {
      min: 0,
      max: 10,
      value: 5
    });

// Assert that slider is non-range slider
    var initialValue = testSlider.getValue();
    var sliderIsRangeValue = initialValue instanceof Array;

expect(sliderIsRangeValue).toBeFalsy();

// Invoke refresh() method
    testSlider.refresh();

// Assert that slider remains a non-range slider
    var afterRefreshValue = testSlider.getValue();
    sliderIsRangeValue = afterRefreshValue instanceof Array;

expect(sliderIsRangeValue).toBeFalsy();
  });

}); // End of spectest/specs/AutoRegisterDataProvideSpec.js000064400000001250151676726750014575 0ustar00describe("Auto register data-provide Tests", function() {
  it("checks that the autoregister Slider was automatically registerd", function() {
    var $el = $("#autoregisterSlider");

var sliderInstancesExists = $el.siblings().is(".slider");
    expect(sliderInstancesExists).toBeTruthy();

var sliderInstancesCount = $el.siblings(".slider").length;
    expect(sliderInstancesCount).toEqual(1);
  });

it("checks that the autoregistered Slider can be accessed", function() {
    var $el = $("#autoregisterSlider");
    
    expect($el.slider('getValue')).toBe(1);

$el.slider('setValue', 2);

expect($el.slider('getValue')).toBe(2);
  });
});test/specs/EventsSpec.js000064400000024433151676726750011311 0ustar00describe("Event Tests", function() {
  var testSlider, flag, mouse;

beforeEach(function() {
    flag = false;
    mouse = document.createEvent('MouseEvents');
  });

describe("JQuery version", function() {
    beforeEach(function() {
      testSlider = $("#testSlider2").slider({
        value: 1
      });
    });

afterEach(function() {
      if(testSlider) {
        testSlider.slider('destroy');
        testSlider = null;
      }
    });

describe("Mouse Events", function() {

it("'slideStart' event is triggered properly and can be binded to", function() {
        testSlider.on('slideStart', function() {
          flag = true;
        });
        testSlider.data('slider')._mousedown(mouse);
        expect(flag).toBeTruthy();
      });

it("'slide' event is triggered properly and can be binded to", function() {
        testSlider.on('slide', function() {
          flag = true;
        });
        testSlider.data('slider')._mousemove(mouse);
        expect(flag).toBeTruthy();
      });

it("'slide' event sets the right value on the input", function() {
        testSlider.on('slide', function() {
          flag = true;
          expect(isNaN(testSlider.val())).not.toBeTruthy();
        });
        testSlider.data('slider')._mousemove(mouse);
        expect(flag).toBeTruthy();
      });

it("'slide' event value and input value properties are synchronous", function() {
        testSlider.on('slide', function(e) {
          flag = true;
          expect(e.value.toString()).toEqual(this.value);
        });
        testSlider.slider("setValue", 3, true, false);

expect(flag).toBeTruthy();
      });

it("'change' event value and input value properties are synchronous", function() {
        testSlider.on('change', function(e) {
          flag = true;
          expect(e.value.newValue.toString()).toEqual(testSlider.val());
        });
        testSlider.slider("setValue", 3, false, true);

expect(flag).toBeTruthy();
      });

it("'slideStop' event is triggered properly and can be binded to", function() {
        testSlider.on('slideStop', function() {
          flag = true;
        });
        testSlider.data('slider')._mouseup(mouse);
        expect(flag).toBeTruthy();
      });

it("slider should not have duplicate events after calling 'refresh'", function() {
        flag = 0;
        testSlider.on('slideStop', function() {
          flag += 1;
        });
        testSlider.slider('refresh');
        testSlider.data('slider')._mouseup();
        expect(flag).toEqual(1);
      });

describe("Disabled Slider Event Tests", function() {
        beforeEach(function() {
          testSlider.slider('disable');
        });

it("should not trigger 'slideStart' event when disabled", function() {
          testSlider.on('slideStart', function() {
            flag = true;
          });
          testSlider.data('slider')._mousedown(mouse);
          expect(flag).not.toBeTruthy();
        });

it("should not trigger 'slide' event when disabled", function() {
          testSlider.on('slide', function() {
            flag = true;
          });
          testSlider.data('slider')._mousemove(mouse);
          expect(flag).not.toBeTruthy();
        });

it("should not trigger 'slideStop' event when disabled", function() {
          testSlider.on('slideStop', function() {
            flag = true;
          });
          testSlider.data('slider')._mouseup();
          expect(flag).not.toBeTruthy();
        });
      });

});

describe("Touch Events", function() {
      var touch;

beforeEach(function() {
        touch = document.createEvent('Event');
        var dummyTouchEvent = document.createEvent('MouseEvents');
        touch.touches = [dummyTouchEvent];
        window.ontouchstart = true;
      });

afterEach(function() {
        window.ontouchstart = null;
      });

it("'slideStart' event is triggered properly and can be binded to", function() {
        touch.initEvent("touchstart");

testSlider.on('slideStart', function() {
          flag = true;
        });
        testSlider.data('slider')._mousedown(touch);

expect(flag).toBeTruthy();
      });

it("'slide' event is triggered properly and can be binded to", function() {
        touch.initEvent("touchmove");

testSlider.on('slide', function() {
          flag = true;
        });
        testSlider.data('slider')._mousemove(touch);

expect(flag).toBeTruthy();
      });

it("'slide' event sets the right value on the input", function() {
        touch.initEvent("touchmove");

testSlider.on('slide', function() {
          flag = true;
          expect(isNaN(testSlider.val())).not.toBeTruthy();
        });
        testSlider.data('slider')._mousemove(touch);

expect(flag).toBeTruthy();
      });

it("'slide' event value and input value properties are synchronous", function() {
        touch.initEvent("touchmove");

testSlider.on('slide', function(e) {
          flag = true;
          expect(e.value.toString()).toEqual(testSlider.val());
        });
        testSlider.slider("setValue", 3, true, false);

expect(flag).toBeTruthy();
      });

it("'change' event value and input value properties are synchronous", function() {
        touch.initEvent("touchmove");

testSlider.on('change', function(e) {
          flag = true;
          expect(e.value.newValue.toString()).toEqual(testSlider.val());
        });
        testSlider.slider("setValue", 3, false, true);

expect(flag).toBeTruthy();
      });

it("'slideStop' event is triggered properly and can be binded to", function() {
        touch.initEvent("touchstop");

testSlider.on('slideStop', function() {
          flag = true;
        });
        testSlider.data('slider')._mouseup();

expect(flag).toBeTruthy();
      });

it("slider should not have duplicate events after calling 'refresh'", function() {
        touch.initEvent("touchstop");
        flag = 0;

testSlider.on('slideStop', function() {
          flag += 1;
        });
        testSlider.slider('refresh');
        testSlider.data('slider')._mouseup();

expect(flag).toEqual(1);
      });

it("slider should not bind multiple touchstart events after calling 'refresh'", function() {
        touch.initEvent("touchstart", true, true);
        flag = 0;

testSlider.on('slideStart', function() {
          flag += 1;
        });
        testSlider.slider('refresh');
        $('.slider .slider-handle').get(0).dispatchEvent(touch);

expect(flag).toEqual(1);
      });

describe("Disabled Slider Event Tests", function() {
        beforeEach(function() {
          testSlider.slider('disable');
        });

it("should not trigger 'slideStart' event when disabled", function() {
          touch.initEvent("touchstart");

testSlider.on('slideStart', function() {
            flag = true;
          });
          testSlider.data('slider')._mousedown(touch);

expect(flag).not.toBeTruthy();
        });

it("should not trigger 'slide' event when disabled", function() {
          touch.initEvent("touchmove");

testSlider.on('slide', function() {
            flag = true;
          });
          testSlider.data('slider')._mousemove(touch);

expect(flag).not.toBeTruthy();
        });

it("should not trigger 'slideStop' event when disabled", function() {
          touch.initEvent("touchend");

testSlider.on('slideStop', function() {
            flag = true;
          });
          testSlider.data('slider')._mouseup();

expect(flag).not.toBeTruthy();
        });
      });

});

describe("Enabled/Disabled tests", function() {
      it("'slideDisabled' event is triggered properly and can be binded to", function() {
        testSlider.on('slideDisabled', function() {
          flag = true;
        });
        testSlider.slider('disable');
        expect(flag).toBeTruthy();
      });

it("'slideDisabled' event is triggered properly and can be binded to", function() {
          testSlider.on('slideEnabled', function() {
            flag = true;
          });
          testSlider.slider('disable');
          testSlider.slider('enable');
          expect(flag).toBeTruthy();
      });

it("'change' event is triggered properly and can be binded to", function() {
        testSlider.on('change', function() {
          flag = true;
        });
        testSlider.slider("setValue", 3, false, true);
        expect(flag).toBeTruthy();
      });
    });

}); // End of JQuery version tests

describe("CommonJS version", function() {
    describe("Event repetition tests", function() {
      var testSlider, numTimesFired;

beforeEach(function() {
        testSlider = new Slider("#testSlider2");
        numTimesFired = 0;
      });

afterEach(function() {
        testSlider.destroy();
      });

it("'slide' event is triggered only once per slide action", function() {
        testSlider.on('slide', function() {
          numTimesFired++;
        });
        testSlider._mousemove(mouse);
        expect(numTimesFired).toEqual(1);
      });

it("'slideStart' event is triggered only once per slide action", function() {
        testSlider.on('slideStart', function() {
          numTimesFired++;
        });
        testSlider._mousedown(mouse);
        expect(numTimesFired).toEqual(1);
      });

it("'slideStop' event is triggered only once per slide action", function() {
        testSlider.on('slideStop', function() {
          numTimesFired++;
        });
        testSlider._mouseup(mouse);
        expect(numTimesFired).toEqual(1);
      });

it("'change' event is triggered only once per value change action", function() {
        testSlider.on('change', function() {
          numTimesFired++;
        });
        testSlider.setValue(3, false, true);
        expect(numTimesFired).toEqual(1);
      });
    });
  }); // End of common JS tests

}); // End of spec
test/specs/PublicMethodsSpec.js000064400000056170151676726750012612 0ustar00describe("Public Method Tests", function() {
  var testSlider;

describe("slider constructor", function() {
    it("reads and sets the 'id' attribute of the slider instance that is created", function() {
      var sliderId = "mySlider";

testSlider = $("#testSlider1").slider({
        id : sliderId
      });

var sliderInstanceHasExpectedId = $("#testSlider1").siblings("div.slider").is("#" + sliderId);
      expect(sliderInstanceHasExpectedId).toBeTruthy();
    });

it("generates multiple slider instances from selector", function() {

$(".makeSlider").slider();

var sliderInstancesExists = $(".makeSlider").siblings().is(".slider");
      expect(sliderInstancesExists).toBeTruthy();

var sliderInstancesCount = $(".makeSlider").siblings(".slider").length;
      expect(sliderInstancesCount).toEqual(2);
    });

it("reads and sets the 'min' option properly", function() {
      var minVal = -5;

testSlider = $("#testSlider1").slider({
        min : minVal
      });
      testSlider.slider('setValue', minVal);

var sliderValue = testSlider.slider('getValue');
      expect(sliderValue).toBe(minVal);
    });

it("reads and sets the 'max' option properly", function() {
      var maxVal = 15;

testSlider = $("#testSlider1").slider({
        max : maxVal
      });
      testSlider.slider('setValue', maxVal);

var sliderValue = testSlider.slider('getValue');
      expect(sliderValue).toBe(maxVal);
    });

it("reads and sets the 'precision' option properly", function() {
      testSlider = $("#testSlider1").slider({
        precision: 2
      });
      testSlider.slider('setValue', 8.115);

var sliderValue = testSlider.slider('getValue');
      expect(sliderValue).toBe(8.12);
    });

it("reads and sets the 'orientation' option properly", function() {
      var orientationVal = "vertical";

testSlider = $("#testSlider1").slider({
        orientation : orientationVal
      });

var orientationClassApplied = $("#testSlider1").siblings("div.slider").hasClass("slider-vertical");
      expect(orientationClassApplied).toBeTruthy();
    });

it("reads and sets the 'value' option properly", function() {
      var val = 8;

testSlider = $("#testSlider1").slider({
        value : val
      });
      testSlider.slider('setValue', val);

var sliderValue = testSlider.slider('getValue');
      expect(sliderValue).toBe(val);
    });

it("reads and sets the 'selection' option properly", function() {
      var selectionVal = "after",
          maxSliderVal = 10;

testSlider = $("#testSlider1").slider({
        selection : selectionVal
      });
      testSlider.slider('setValue', maxSliderVal);

var sliderSelectionWidthAtMaxValue = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").width();
      expect(sliderSelectionWidthAtMaxValue).toBe(0);
    });

it("updates the 'selection' option properly", function() {
      var selectionVal = "none",
          maxSliderVal = 10;

testSlider = $("#testSlider1").slider({
        selection : selectionVal
      });
      testSlider.slider('setValue', maxSliderVal);
      testSlider.slider('refresh');

var sliderSelectionHasHideClass_A = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-low").hasClass('hide');
      expect(sliderSelectionHasHideClass_A).toBe(true);
      var sliderSelectionHasHideClass_B = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").hasClass('hide');
      expect(sliderSelectionHasHideClass_B).toBe(true);
      var sliderSelectionHasHideClass_C = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-high").hasClass('hide');
      expect(sliderSelectionHasHideClass_C).toBe(true);

var newSelectionVal = 'after';
      testSlider.slider('setAttribute', 'selection', newSelectionVal);
      testSlider.slider('refresh');

var sliderSelectionHasHideClass_D = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-low").hasClass('hide');
      expect(sliderSelectionHasHideClass_D).toBe(false);
      var sliderSelectionHasHideClass_E = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").hasClass('hide');
      expect(sliderSelectionHasHideClass_E).toBe(false);
      var sliderSelectionHasHideClass_F = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-high").hasClass('hide');
      expect(sliderSelectionHasHideClass_F).toBe(false);
    });
    it("reads and sets the 'handle' option properly", function() {
      var handleVal = "triangle";

testSlider = $("#testSlider1").slider({
        handle : handleVal
      });

var handleIsSetToTriangle = $("#testSlider1").siblings(".slider").children("div.slider-handle").hasClass("triangle");
      expect(handleIsSetToTriangle).toBeTruthy();
    });

it("reads and sets the 'reversed' option properly", function() {
      var reversedVal = true,
          maxSliderVal = 10;

testSlider = $("#testSlider1").slider({
        reversed : reversedVal
      });
      testSlider.slider('setValue', maxSliderVal);

var sliderSelectionHeightAtMaxValue = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").width();
      expect(sliderSelectionHeightAtMaxValue).toBe(0);
    });

/* TODO: Fix this test! It keeps throwing a weird bug where is says '955' instead of '9' for the value */
    // it("reads and sets the 'formatter' option properly", function() {
    //   var tooltipFormatter = function(value) {
    //     return 'Current value: ' + value;
    //   };

//   testSlider = $("#testSlider1").slider({
    //     formatter : tooltipFormatter
    //   });
    //   testSlider.slider('setValue', 9);

//   var tooltipMessage = $("#testSlider1").siblings(".slider").find("div.tooltip").children("div.tooltip-inner").text();
    //   var expectedMessage = tooltipFormatter(9);
    //   expect(tooltipMessage).toBe(expectedMessage);
    // });

it("reads and sets the 'enabled' option properly", function() {
      testSlider = $("#testSlider1").slider({
        enabled: false
      });
      var isEnabled = testSlider.slider('isEnabled');
      expect(isEnabled).not.toBeTruthy();
    });

describe("reads and sets the 'tooltip' option properly", function() {
      it("tooltip is not shown if set to 'hide'", function() {
        testSlider = $("#testSlider1").slider({
          tooltip : "hide"
        });

var tooltipIsHidden = testSlider.siblings(".slider").children("div.tooltip").hasClass("hide");
        expect(tooltipIsHidden).toBeTruthy();
      });

it("tooltip is shown during sliding if set to 'show'", function() {
        testSlider = $("#testSlider1").slider({
          tooltip : "show"
        });

var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
        expect(tooltipIsHidden).toBeTruthy();

// Trigger hover
        var mouseenterEvent = document.createEvent("Events");
        mouseenterEvent.initEvent("mouseenter", true, true);
        testSlider.data('slider').sliderElem.dispatchEvent(mouseenterEvent);

var tooltipIsShownAfterSlide = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
        expect(tooltipIsShownAfterSlide).toBeTruthy();
      });

it("tooltip is shown on mouse over and hides correctly after mouse leave", function() {
        testSlider = $("#testSlider1").slider({
          tooltip : "show"
        });

var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
        expect(tooltipIsHidden).toBeTruthy();

var tooltipIsShownAfterSlide = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
        expect(tooltipIsShownAfterSlide).toBeTruthy();

// Trigger leave
        var mouseleaveEvent = document.createEvent("Events");
        mouseleaveEvent.initEvent("mouseleave", true, true);
        testSlider.data('slider').sliderElem.dispatchEvent(mouseleaveEvent);

var tooltipIsAgainHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
        expect(tooltipIsAgainHidden).toBeTruthy();
      });

it("tooltip is always shown if set to 'always'", function() {
        testSlider = $("#testSlider1").slider({
          tooltip : "always"
        });

var tooltipIsShown = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
        expect(tooltipIsShown).toBeTruthy();
      });

it("defaults to 'show' option if invalid value is passed", function() {
        testSlider = $("#testSlider1").slider({
          tooltip : "invalid option value"
        });

var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
        expect(tooltipIsHidden).toBeTruthy();

var tooltipIsShownOnHover = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
        expect(tooltipIsShownOnHover).toBeTruthy();
      });
    });
  });

describe("'setValue()' tests", function() {
    var formatInvalidInputMsg = function(invalidValue) { return "Invalid input value '" + invalidValue + "' passed in"; };

describe("if slider is a single value slider", function() {
      beforeEach(function() {
        testSlider = $("#testSlider1").slider();
      });

it("properly sets the value of the slider when given a numeric value", function() {
        var valueToSet = 5;
        testSlider.slider('setValue', valueToSet);

var sliderValue = testSlider.slider('getValue');
        expect(sliderValue).toBe(valueToSet);
      });

it("properly sets the value of the slider when given a string value", function(){
        var valueToSet = "5";
        testSlider.slider('setValue', valueToSet);

var sliderValue = testSlider.slider('getValue');
        expect(sliderValue).toBe(5);
      });

it("if a value passed in is greater than the max (10), the slider only goes to the max", function() {
        var maxValue = 10,
            higherThanSliderMaxVal = maxValue + 5;

testSlider.slider('setValue', higherThanSliderMaxVal);

var sliderValue = testSlider.slider('getValue');
        expect(sliderValue).toBe(maxValue);
      });

it("if a value passed in is less than the min (0), the slider only goes to the min", function() {
        var minValue = 0,
            lowerThanSliderMaxVal = minValue - 5;

testSlider.slider('setValue', lowerThanSliderMaxVal);

var sliderValue = testSlider.slider('getValue');
        expect(sliderValue).toBe(minValue);
      });

it("sets the 'value' property of the slider <input> element", function() {
        var value = 9;
        testSlider.slider('setValue', value);

var currentValue = document.querySelector("#testSlider1").value;
        currentValue = parseFloat(currentValue);

expect(currentValue).toBe(value);
      });

it("sets the 'value' attribute of the slider <input> element", function() {
        var value = 9;
        testSlider.slider('setValue', value);

var currentValue = document.querySelector("#testSlider1").getAttribute("value");
        currentValue = parseFloat(currentValue);

expect(currentValue).toBe(value);
      });

describe("when an invalid value type is passed in", function() {
        var invalidValue;

beforeEach(function() {
          invalidValue = "a";
        });

it("throws an error and does not alter the slider value", function() {
          var originalSliderValue = testSlider.slider('getValue');

var settingValue = function() {
            testSlider.slider('setValue', invalidValue);
          };
          expect(settingValue).toThrow(new Error( formatInvalidInputMsg(invalidValue) ));

var sliderValue = testSlider.slider('getValue');
          expect(sliderValue).toBe(originalSliderValue);
        });
      });
    });

describe("if slider is a range slider", function() {
      beforeEach(function() {
        testSlider = $("#testSlider1").slider({
          value : [3, 8]
        });
      });

it("properly sets the values if both within the max and min", function() {
        var valuesToSet = [5, 7];
        testSlider.slider('setValue', valuesToSet);

var sliderValues = testSlider.slider('getValue');
        expect(sliderValues[0]).toBe(valuesToSet[0]);
        expect(sliderValues[1]).toBe(valuesToSet[1]);
      });

describe("caps values to the min if they are set to be less than the min", function() {
        var minValue = -5,
            otherValue = 7;

it("first value is capped to min", function() {
          testSlider.slider('setValue', [minValue, otherValue]);

var sliderValues = testSlider.slider('getValue');
          expect(sliderValues[0]).toBe(0);
        });

it("second value is capped to min", function() {
          testSlider.slider('setValue', [otherValue, minValue]);

var sliderValues = testSlider.slider('getValue');
          expect(sliderValues[1]).toBe(0);
        });
      });

describe("caps values to the max if they are set to be higher than the max", function() {
        var maxValue = 15,
            otherValue = 7;

it("first value is capped to max", function() {
          testSlider.slider('setValue', [maxValue, otherValue]);

var sliderValues = testSlider.slider('getValue');
          expect(sliderValues[0]).toBe(10);
        });

it("second value is capped to max", function() {
          testSlider.slider('setValue', [otherValue, maxValue]);

var sliderValues = testSlider.slider('getValue');
          expect(sliderValues[1]).toBe(10);
        });
      });

describe("if either value is of invalid type", function() {
        var invalidValue = "a",
            otherValue = 7;

it("first value is of invalid type", function() {
          var setSliderValueFn = function() {
            testSlider.slider('setValue', [invalidValue, otherValue]);
          };
          expect(setSliderValueFn).toThrow(new Error( formatInvalidInputMsg(invalidValue) ));
        });
        it("second value is of invalid type", function() {
          var setSliderValueFn = function() {
            testSlider.slider('setValue', [otherValue, invalidValue]);
          };
          expect(setSliderValueFn).toThrow(new Error( formatInvalidInputMsg(invalidValue) ));
        });
      });
    });

describe("triggerSlideEvent argument", function() {
      it("if triggerSlideEvent argument is true, the 'slide' event is triggered", function() {
        var testSlider = $("#testSlider1").slider({
          value : 3
        });

var newSliderVal = 5;

testSlider.on('slide', function(evt) {
            expect(newSliderVal).toEqual(evt.value);
          });

testSlider.slider('setValue', newSliderVal, true);
      });

it("if triggerSlideEvent argument is false, the 'slide' event is not triggered", function() {
        var newSliderVal = 5;
        var slideEventTriggered = false;
        var testSlider = $("#testSlider1").slider({
          value : 3
        });

testSlider.on('slide', function() {
          slideEventTriggered = true;
        });
        testSlider.slider('setValue', newSliderVal, false);

expect(slideEventTriggered).toEqual(false);
      });
    });

describe("triggerChangeEvent argument", function() {
      it("if triggerChangeEvent argument is true, the 'change' event is triggered", function() {
        var testSlider = $("#testSlider1").slider({
          value : 3
        });

var newSliderVal = 5;

testSlider.on('change', function(evt) {
          expect(newSliderVal).toEqual(evt.value.newValue);
        });

testSlider.slider('setValue', newSliderVal, true);
      });

it("if triggerChangeEvent argument is false, the 'change' event is not triggered", function() {
        var changeEventTriggered = false;
        var testSlider = $("#testSlider1").slider({
          value : 3
        });

testSlider.on('change', function() {
          changeEventTriggered = true;
        });
        testSlider.slider('setValue', 5, false);

expect(changeEventTriggered).toEqual(false);
      });
    });

});

describe("'getValue()' tests", function() {
    it("returns the current value of the slider", function() {
      testSlider = $("#testSlider1").slider();

var valueToSet = 5;
      testSlider.slider('setValue', valueToSet);

var sliderValue = testSlider.slider('getValue');
      expect(sliderValue).toBe(valueToSet);
    });
  });

describe("'enable()' tests", function() {
    it("correctly enables a slider", function() {
      testSlider = $("#testSlider1").slider({
        enabled: false
      });
      testSlider.slider("enable");
      var isEnabled = testSlider.slider("isEnabled");
      expect(isEnabled).toBeTruthy();
    });
  });

describe("'disable()' tests", function() {
    it("correctly disable a slider", function() {
      testSlider = $("#testSlider1").slider();
      testSlider.slider("disable");
      var isEnabled = testSlider.slider("isEnabled");
      expect(isEnabled).not.toBeTruthy();
    });
  });

describe("'toggle()' tests", function() {
    it("correctly enables a disabled slider", function() {
      testSlider = $("#testSlider1").slider({
        enabled: false
      });
      testSlider.slider("toggle");
      var isEnabled = testSlider.slider("isEnabled");
      expect(isEnabled).toBeTruthy();
    });

it("correctly disables an enabled slider", function() {
      testSlider = $("#testSlider1").slider();
      testSlider.slider("toggle");
      var isEnabled = testSlider.slider("isEnabled");
      expect(isEnabled).not.toBeTruthy();
    });
  });

describe("'isEnabled()' tests", function() {
    it("returns true for an enabled slider", function() {
      testSlider = $("#testSlider1").slider({
        id: "enabled",
        enabled: true
      });

var isEnabled = testSlider.slider("isEnabled");
      var $slider = testSlider.siblings("#enabled");
      var hasDisabledClass = $slider.hasClass("slider") && $slider.hasClass("#enabled");

expect(isEnabled).toBeTruthy();
      expect(hasDisabledClass).not.toBeTruthy();
    });

it("returns false for a disabled slider", function() {
      testSlider = $("#testSlider1").slider({
        id: "disabled",
        enabled: false
      });

var isEnabled = testSlider.slider("isEnabled");
      var $slider = testSlider.siblings("#disabled");
      var hasDisabledClass = $slider.hasClass("slider") && $slider.hasClass("slider-disabled");

expect(isEnabled).not.toBeTruthy();
      expect(hasDisabledClass).toBeTruthy();
    });
  });

it("get attribute", function() {
    testSlider = $("#testSlider1").slider();

var sliderMaxValue = testSlider.slider('getAttribute', 'max');
    expect(sliderMaxValue).toBe(10);
  });

it("changes slider from basic to range", function() {
    testSlider = $("#makeRangeSlider").slider();
    testSlider.slider('setAttribute', 'range', true).slider('refresh');

var isRangeSlider = $("#changeOrientationSlider").parent("div.slider").find('.slider-handle').last().hasClass('hide');
    expect(isRangeSlider).toBeFalsy();
  });

it("setAttribute: changes the 'data-slider-orientation' property from horizontal to vertical", function() {
    testSlider = $("#changeOrientationSlider").slider({
      id: "changeOrientationSliderElem"
    });
    testSlider.slider('setAttribute', 'orientation', 'vertical').slider('refresh');

var $slider = $("#changeOrientationSliderElem");
    var orientationClassApplied = $slider.hasClass("slider-vertical");

expect(orientationClassApplied).toBeTruthy();
  });

it("relayout: if slider is not displayed on initialization and then displayed later on, relayout() will not adjust the margin-left of the tooltip", function() {
    // Setup
    testSlider = new Slider("#relayoutSliderInput", {
      id: "relayoutSlider",
      min: 0,
      max: 10,
      value: 5
    });
    var mainTooltipDOMRef = document.querySelector("#relayoutSlider .tooltip-main");
    var relayoutSliderContainerDOMRef = document.querySelector("#relayoutSliderContainer");
    var tooltipMarginLeft;
    // Main tooltip margin-left offset should not be set on slider intialization
    tooltipMarginLeft = parseFloat(mainTooltipDOMRef.style.marginLeft);
    expect(tooltipMarginLeft).toBeNaN();
    // Show slider and call relayout()
    relayoutSliderContainerDOMRef.style.display = "block";
    testSlider.relayout();
    // Main tooltip margin-left offset should not be set after relayout() is called.
    tooltipMarginLeft = Math.abs( parseFloat(mainTooltipDOMRef.style.marginLeft) );
    expect(tooltipMarginLeft).toBeNaN();
  });

it("relayout: if slider is not displayed on initialization and then displayed later on, relayout() will re-adjust the tick label width", function() {
    // Setup
    testSlider = new Slider("#relayoutSliderInputTickLabels", {
      id: "relayoutSliderTickLabels",
      min: 0,
      max: 10,
      ticks: [0, 5, 10],
      ticks_labels: ['low', 'mid', 'high'],
      value: 5
    });

var $ticks = $('#relayoutSliderTickLabels').find('.slider-tick-label');

// Tick-Width should be 0 on slider intialization
    var i, $tick;
    for (i = 0; i < $ticks.length; i++) {
      $tick = $($ticks[i]);
      expect( parseInt($tick.css('width')) ).toBe(0);
    }

// Show slider and call relayout()
    $('#relayoutSliderContainerTickLabels').css('display', 'block');
    testSlider.relayout();
    $('#relayoutSliderContainerTickLabels').css('display', 'none');

// Tick-Width should re-adjust to be > 0
    for (i = 0; i < $ticks.length; i++) {
      $tick = $($ticks[i]);
      expect( parseInt($tick.css('width')) ).toBeGreaterThan(0);
    }
  });

afterEach(function() {
    if(testSlider) {
      if(testSlider instanceof jQuery) { testSlider.slider('destroy'); }
      if(testSlider instanceof Slider) { testSlider.destroy(); }
      testSlider = null;
    }
  });

});
test/specs/TooltipMouseOverOptionSpec.js000064400000004454151676726750014536 0ustar00describe("'ticks_tooltip' Option tests", function() {
	var testSlider;
	describe("ticks_tooltip states", function() {
        it("should have the tooltip above the last hovered over element", function() {
            testSlider = new Slider(document.getElementById("testSlider1"), {
				ticks: [0, 1, 2, 3, 4, 5, 6],
				ticks_positions: [0, 19, 29, 39, 49, 95, 100],
				step: 1,
				value: 4,
                ticks_tooltip: true,
                orientation: 'horizontal'
			});
			var mouseEventArguments = [
				'mousemove', // type
				true, // canBubble
				true, // cancelable
				document, // view,
				0, // detail
				0, // screenX
				0, // screenY
				undefined, // clientX
				testSlider.sliderElem.offsetTop, // clientY,
				false, // ctrlKey
				false, // altKey
				false, // shiftKey
				false, // metaKey,
				0, // button
				null // relatedTarget
			];
			var mouse49 = document.createEvent('MouseEvents');
			mouseEventArguments[7] = testSlider.ticks[4].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
			mouse49.initMouseEvent.apply(mouse49, mouseEventArguments);
			var mouse95 = document.createEvent('MouseEvents');
			mouseEventArguments[7] = testSlider.ticks[5].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
			mouse95.initMouseEvent.apply(mouse95, mouseEventArguments);
			var mouse100 = document.createEvent('MouseEvents');
			mouseEventArguments[7] = testSlider.ticks[6].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
			mouse100.initMouseEvent.apply(mouse100, mouseEventArguments);
			var mouseStart = document.createEvent('MouseEvents');
			mouseEventArguments[7] = testSlider.ticks[0].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
			mouseStart.initMouseEvent.apply(mouseStart, mouseEventArguments);

//Simulate random movements
			testSlider.mousedown(mouse49);
			testSlider.mousemove(mouse95);
			testSlider.mouseup();
			testSlider.mousedown(mouse49);
			testSlider.mousemove(mouse100);
			testSlider.mousemove(mouse95);
			testSlider.mousemove(mouse95);
			testSlider.mousemove(mouseStart);
            expect(testSlider.tooltip.style.left).toBe("0%");
		});
	});
	afterEach(function() {
		if(testSlider) {
			if(testSlider instanceof Slider) { testSlider.destroy(); }
			testSlider = null;
		}
	});
});test/specs/DraggingHandlesSpec.js000064400000017022151676726750013062 0ustar00describe("Dragging handles tests", function() {
	var testSlider;
	var mouseEventArguments;
	var tickOffsets;

beforeEach(function() {
		// Create slider
		testSlider = new Slider(document.getElementById("testSlider1"), {
			ticks: [0, 1, 2, 3, 4, 5, 6],
			value: [4, 5],
			step: 1,
			range: true,
		});
		// Set up default set of mouse event arguments
		mouseEventArguments = [
			'mousemove', // type
			true, // canBubble
			true, // cancelable
			document, // view,
			0, // detail
			0, // screenX
			0, // screenY
			undefined, // clientX
			testSlider.sliderElem.offsetTop, // clientY,
			false, // ctrlKey
			false, // altKey
			false, // shiftKey
			false, // metaKey,
			0, // button
			null // relatedTarget
		];
		// Calculate and store the 'clientX' for each tick in the slider
		tickOffsets = testSlider.ticks.map(function (tick) {
			return tick.offsetLeft + testSlider.sliderElem.offsetLeft;
		});
	});

afterEach(function() {
		if(testSlider) {
			if(testSlider instanceof Slider) { testSlider.destroy(); }
			testSlider = null;
		}
	});

describe("Dragging handles over each other", function() {
		it("should swap reliably given imprecision", function() {
			// Create mouse event with position to the left of problem tick
			var mouseLeft = document.createEvent('MouseEvents');
			mouseEventArguments[7] = tickOffsets[4]; // clientX
			mouseLeft.initMouseEvent.apply(mouseLeft, mouseEventArguments);
			// Create mouse event with position on problem tick
			var mouseOverlap = document.createEvent('MouseEvents');
			mouseEventArguments[7] = tickOffsets[5]; // clientX
			mouseOverlap.initMouseEvent.apply(mouseOverlap, mouseEventArguments);
			// Create mouse event with position to the right of problem tick
			var mouseRight = document.createEvent('MouseEvents');
			mouseEventArguments[7] = tickOffsets[6]; // clientX
			mouseRight.initMouseEvent.apply(mouseRight, mouseEventArguments);
			// Simulate drag without swapping
			testSlider.mousedown(mouseLeft);
			expect(testSlider._state.dragged).toBe(0);
			expect(testSlider.getValue()).toEqual([4, 5]);
			// Simulate handle overlap
			testSlider.mousemove(mouseOverlap);
			expect(testSlider._state.dragged).toBe(0);
			expect(testSlider.getValue()).toEqual([5, 5]);
			// Simulate left over right drag with imprecision in reported percentage
			testSlider.mousemove(mouseRight);
			expect(testSlider._state.dragged).toBe(1);
			expect(testSlider.getValue()).toEqual([5, 6]);
			// Simulate handle overlap
			testSlider.mousemove(mouseOverlap);
			expect(testSlider._state.dragged).toBe(1);
			expect(testSlider.getValue()).toEqual([5, 5]);
			// Simulator handle overlap with click
			testSlider.mousemove(mouseOverlap);
			testSlider.mousedown(mouseLeft);
			expect(testSlider._state.dragged).toBe(0);
			expect(testSlider.getValue()).toEqual([4, 5]);
			// Simulate right over left drag with imprecision in reported percentage
			testSlider.mousemove(mouseLeft);
			expect(testSlider._state.dragged).toBe(0);
			expect(testSlider.getValue()).toEqual([4, 5]);
			// End with mouse up
			testSlider.mouseup();
			expect(testSlider._state.dragged).toBeNull();
			expect(testSlider.getValue()).toEqual([4, 5]);
		});
	});

describe("Drag handles over each other and use keyboard to move handles over each other", function() {
		var keyboardEvent;

function createMouseEvent(type, tickIdx) {
			var mouseEvent = document.createEvent('MouseEvent');
			mouseEventArguments[0] = type;
			mouseEventArguments[7] = tickOffsets[tickIdx];
			mouseEvent.initMouseEvent.apply(mouseEvent, mouseEventArguments);
			return mouseEvent;
		}

beforeEach(function() {
			// Create keyboard event
			keyboardEvent = document.createEvent('Event');
			keyboardEvent.initEvent('keydown', true, true);
		});

afterEach(function() {
			keyboardEvent = null;
		});

it("should drag and keydown handles properly to the right then back to the left", function() {
			// Simulate drag without swapping
			testSlider.mousedown(createMouseEvent('mousedown', 4));
			expect(testSlider._state.dragged).toBe(0);
			expect(testSlider.getValue()).toEqual([4, 5]);

// Simulate handle overlap
			testSlider.mousemove(createMouseEvent('mousemove', 5));
			expect(testSlider._state.dragged).toBe(0);
			expect(testSlider.getValue()).toEqual([5, 5]);

// Simulate left over right drag
			testSlider.mousemove(createMouseEvent('mousemove', 6));
			expect(testSlider._state.dragged).toBe(1);
			expect(testSlider.getValue()).toEqual([5, 6]);

// End with mouse up
			testSlider.mouseup();
			expect(testSlider._state.dragged).toBeNull();
			expect(testSlider.getValue()).toEqual([5, 6]);

// Now move the handles past each other with the Left arrow key
			keyboardEvent.keyCode = keyboardEvent.which = 37;

// Move handle2 to the left with keyboard
			testSlider.handle2Keydown(keyboardEvent);
			expect(testSlider._state.keyCtrl).toBeUndefined();
			expect(testSlider.getValue()).toEqual([5, 5]);

// Move handle2 to the left again
			testSlider.handle2Keydown(keyboardEvent);
			expect(testSlider._state.keyCtrl).toBeUndefined();
			expect(testSlider.getValue()).toEqual([4, 5]);
		});

it("should drag and keydown handles properly to the left then back to the right", function() {
			// Simulate drag without swapping
			testSlider.mousedown(createMouseEvent('mousedown', 5));
			expect(testSlider._state.dragged).toBe(1);
			expect(testSlider.getValue()).toEqual([4, 5]);

// Simulate handle overlap
			testSlider.mousemove(createMouseEvent('mousemove', 4));
			expect(testSlider._state.dragged).toBe(1);
			expect(testSlider.getValue()).toEqual([4, 4]);

// Simulate left over right drag
			testSlider.mousemove(createMouseEvent('mousemove', 3));
			expect(testSlider._state.dragged).toBe(0);
			expect(testSlider.getValue()).toEqual([3, 4]);

// End with mouse up
			testSlider.mouseup();
			expect(testSlider._state.dragged).toBeNull();
			expect(testSlider.getValue()).toEqual([3, 4]);

// Now move the handles past each other with the Right arrow key
			keyboardEvent.keyCode = keyboardEvent.which = 39;

// Move handle1 to the right with keyboard
			testSlider.handle1Keydown(keyboardEvent);
			expect(testSlider._state.keyCtrl).toBeUndefined();
			expect(testSlider.getValue()).toEqual([4, 4]);

// Move handle1 to the right again
			testSlider.handle1Keydown(keyboardEvent);
			expect(testSlider._state.keyCtrl).toBeUndefined();
			expect(testSlider.getValue()).toEqual([4, 5]);
		});
    });

it("Should snap to a tick within tick bounds when using the mouse navigation", function() {

testSlider.setAttribute('range', true);
        testSlider.setAttribute('ticks_snap_bounds', 0.45);
        testSlider.setAttribute('step', 0.1);
        testSlider.refresh();

// Create mouse events
        var mouseDown = document.createEvent("MouseEvents");
        mouseEventArguments[7] = tickOffsets[1];
        mouseDown.initMouseEvent.apply(mouseDown, mouseEventArguments);

var mouseRight = document.createEvent("MouseEvents");
        mouseEventArguments[7] = tickOffsets[2] - 2;
        mouseRight.initMouseEvent.apply(mouseRight, mouseEventArguments);

testSlider.mousedown(mouseDown);
		expect(testSlider.getValue()).toEqual([0.7, 5]);

testSlider.mousemove(mouseRight);
        expect(testSlider.getValue()).toEqual([2, 5]);

// End with mouse up
        testSlider.mouseup();
        expect(testSlider.getValue()).toEqual([2, 5]);

});
});
test/specs/ScrollableContainerSpec.js000064400000006142151676726750013767 0ustar00describe("Scrollable test", function() {
    var testSlider;
    var sliderHandleTopPos;
    var sliderHandleLeftPos;
    var scrollableContainer;

describe("Vertical inside scrollable container", function() {
        beforeEach(function() {
            testSlider = new Slider("#ex1", {
                id: "ex1Slider",
                orientation: "vertical",
                min: 0,
                max: 20,
                value: 10,
                step: 1
            });

scrollableContainer = document.querySelector('#scrollable-div');
            scrollableContainer.scrollTop = 145;

var sliderHandleEl = document.querySelector("#ex1Slider .slider-handle");
            var sliderHandleBoundingBoxInfo = sliderHandleEl.getBoundingClientRect();
            sliderHandleTopPos = sliderHandleBoundingBoxInfo.top;
            sliderHandleLeftPos = sliderHandleBoundingBoxInfo.left;

});

afterEach(function() {
            if(testSlider) {
                testSlider.destroy();
            }
        });

// The difference between sliderHandleTopPos and mousemoveY is equal to 50 in both cases,
        // but difference between initial and final slider value is not equal (6 and 4).
        // It happens because we don't 'hit' the center of handle but the top left corner.

it("slides up when handle moves upwards inside scrollable element after scrolling", function() {
            var mousemove = document.createEvent('MouseEvents');
            var mousemoveX = sliderHandleLeftPos;
            var mousemoveY = sliderHandleTopPos - 50;
            var newSliderValue;

mousemove.initMouseEvent(
                "mousedown",
                true /* bubble */,
                true  /* cancelable */,
                window,
                null,
                0, 0, mousemoveX, mousemoveY, /* coordinates */
                false, false, false, false, /* modifier keys */
                0 /*left*/,
                null
            );
            testSlider.sliderElem.dispatchEvent(mousemove);
            newSliderValue = testSlider.getValue();

expect(newSliderValue).toEqual(4);
        });

it("slides down when handle moves downwards inside scrollable element after scrolling", function() {
            var mousemove = document.createEvent('MouseEvents');
            var mousemoveX = sliderHandleLeftPos;
            var mousemoveY = sliderHandleTopPos + 50;
            var newSliderValue;

mousemove.initMouseEvent(
                "mousedown",
                true /* bubble */,
                true /* cancelable */,
                window,
                null,
                0, 0, mousemoveX, mousemoveY, /* coordinates */
                false, false, false, false, /* modifier keys */
                0 /*left*/,
                null
            );
            testSlider.sliderElem.dispatchEvent(mousemove);
            newSliderValue = testSlider.getValue();

expect(newSliderValue).toEqual(14);
        });
    });

}); // End of spec
test/specs/StepReachMaxValueSpec.js000064400000003251151676726750013361 0ustar00describe("TickMaxValueNotATickBehavior", function() {
  var SLIDER_ID = "testSlider1";
  var slider;
  var options;

describe('max value should be reached', function() {
    beforeEach(function() {
      options = {
        min: 40,
        max: 1310,
        step: 5,
        scale: "logarithmic",
        value: 44
      };
      slider = new Slider(document.getElementById(SLIDER_ID), options);
    });

it("Value should contain max value when slider is moved to outer right position", function() {
      var sliderLeft = slider.sliderElem.offsetLeft;
      var offsetY = slider.sliderElem.offsetTop;
      // I think the + 10 work because it is half of the handle size;
      var offsetX = sliderLeft + slider.sliderElem.clientWidth + 10;
      var expectedValue = slider.options.max;
      var mouseEvent = getMouseDownEvent(offsetX, offsetY);
      slider.mousedown(mouseEvent);
      slider.mouseup();
      expect(slider.getValue()).toBe(expectedValue);
    });
  });

afterEach(function() {
    slider.destroy();
  });

// helper functions
  function getMouseDownEvent(offsetXToClick, offsetYToClick) {
    var args = [
      'mousedown', // type
      true, // canBubble
      true, // cancelable
      document, // view,
      0, // detail
      0, // screenX
      0, // screenY
      offsetXToClick, // clientX
      offsetYToClick, // clientY,
      false, // ctrlKey
      false, // altKey
      false, // shiftKey
      false, // metaKey,
      0, // button
      null // relatedTarget
    ];

var event = document.createEvent('MouseEvents');
    event.initMouseEvent.apply(event, args);
    return event;
  }

});
test/specs/DestroyMethodTests.js000064400000030413151676726750013042 0ustar00describe("'destroy()' Method tests", function() {
  var testSlider;
  
  function createSliderFn() {
    testSlider = new Slider("#testSlider1", {
      id: "destroyMethodTestSlider"
    });
  }

it("removes the extra DOM elements associated with a slider", function() {

createSliderFn();

testSlider.destroy();

var sliderParentElement = $("#testSlider1").parent('div.slider').length;
    var sliderChildrenElements = $("#testSlider1").siblings('div.slider-track, div.tooltip').length;

expect(sliderParentElement).toBe(0);
    expect(sliderChildrenElements).toBe(0);
  });

describe("unbinds all slider events", function() {
    var flag, evtName;

beforeEach(function() {
      createSliderFn();
      flag = false;
    });

it("unbinds from 'slideStart' event", function() {
      evtName = 'slideStart';
      $("#destroyMethodTestSlider").on(evtName, function() {
        flag = true;
      });
      testSlider.destroy();
      $("#destroyMethodTestSlider").trigger(evtName);
      expect(flag).toBeFalsy();
    });

it("unbinds from 'slide' event", function() {
      evtName = 'slide';
      $("#destroyMethodTestSlider").on(evtName, function() {
        flag = true;
      });
      testSlider.destroy();
      $("#destroyMethodTestSlider").trigger(evtName);
      expect(flag).toBeFalsy();
    });

it("unbinds from 'slideStop' event", function() {
      evtName = 'slideStop';
      $("#destroyMethodTestSlider").on(evtName, function() {
        flag = true;
      });
      testSlider.destroy();
      $("#destroyMethodTestSlider").trigger(evtName);
      expect(flag).toBeFalsy();
    });

it("unbinds from 'slideChange' event", function() {
      evtName = 'slideChange';
      $("#destroyMethodTestSlider").on(evtName, function() {
        flag = true;
      });
      testSlider.destroy();
      $("#destroyMethodTestSlider").trigger(evtName);
      expect(flag).toBeFalsy();
    });

it("unbinds all slider events and allows you to re-create the slider without runtime error", function() {
      // Setup
      var createSliderAndBindEvent = function () {
        $("#testSlider1").bootstrapSlider({
          min: 0,
          max: 1000 * 1000,
          step: 1000
        });
        testSlider = $("#testSlider1").data("bootstrapSlider");
        testSlider.on("slideStop", function() {});
      };
      // Destroy existing slider from default bootstrap step
      testSlider.destroy();

// Create new Slider
      createSliderAndBindEvent();

// Destroy slider
      testSlider.destroy();

// Re-create Slider and try to re-bind event
      var throwsRuntimeError = false;
      
      try {
        createSliderAndBindEvent();
      }
      catch (e) {
        throwsRuntimeError = true;
      }

// reCreateSliderAndBindEvent(): Assert error is not thrown
      expect(throwsRuntimeError).toBeFalsy();
    });
  });

describe("DOM event listener removal tests", function() {
    describe("When tooltips are always hidden for single value sliders", function() {
      beforeEach(function() {
        // Create slider
        testSlider = new Slider("#testSlider1", {
          id: "destroyMethodTestSlider",
          tooltip: "hide"
        });
      });

it("does not try to remove 'focus' event listener from handle1", function() {
        // Set up spy on 'removeEventListener'
        spyOn(testSlider.handle1, "removeEventListener");