FORM ELEMENTS

<!-- 

	AVAILABLE COLORS:

	.primary-slider

	.success-slider

	.warning-slider

	.danger-slider

	.info-slider

	.purple-slider

	.black-slider



	CREATE YOUR OWN COLOR - EXAMPLE:

	.warning-slider .ui-slider .ui-slider-handle{ border-color:#ed9c28; }

	.warning-slider .ui-slider .ui-slider-handle:before,

	.warning-slider .ui-slider .ui-slider-range { background-color:#ed9c28;  }

-->





<!-- Slider 0 -->

<div class="mb-40">

	<div class="mb-10">

		Select a month: <span id="monthOutput"></span>

	</div>                 

	<div class="slider-wrapper primary-slider">

		<div id="slider"></div>

	</div>

</div>





<!-- Slider 1 -->

<div class="mb-20">

	<div class="slider-wrapper danger-slider">

		<div id="slider1"></div>

	</div>

</div>





<!-- Slider 2 -->

<div class="mb-40">

	<div class="mb-10">

		<label for="amount">Maximum price:</label>

		<input type="hidden" name="amount" id="amount" class="form-control"> <!-- hidden input -->

	</div>           

	<div class="slider-wrapper warning-slider">

		<div id="slider2"></div>

	</div>

</div>



<!-- Slider 3 -->

<div class="mb-40">

	<div class="mb-10">

		<label for="bedrooms">Number of bedrooms:</label>

		<input type="hidden" name="bedrooms" id="bedrooms" class="form-control"> <!-- hidden input -->

	</div>              

	<div class="slider-wrapper info-slider">

		<div id="slider3"></div>

	</div>

</div>





<!-- Slider 4 -->

<div>

	<div class="mb-20">

		<label for="guests">Update select value</label>

		<label class="field select">

			<select class="form-control" name="guests" id="guests">

				<option>1</option>

				<option selected="selected">2</option>

				<option>3</option>

				<option>4</option>

				<option>5</option>

				<option>6</option>

				<option>7</option>

				<option>8</option>

				<option>9</option>

				<option>10</option>                                

			</select>

			<i class="arrow double"></i>

		</label> 

	</div>           

	<div class="slider-wrapper">

		<div id="slider4"></div>

	</div>

</div>





<!-- Slider 5 -->

<div>

	<div class="mb-20">

		<label for="donation">Update input value</label>

		<label class="field">

			<input type="text" id="donation" class="form-control">

		</label> 

	</div>                

	<div class="slider-wrapper black-slider">

		<div id="slider5"></div>

	</div>

</div>

<!-- 

	AVAILABLE COLORS:

	.primary-slider

	.success-slider

	.warning-slider

	.danger-slider

	.info-slider

	.purple-slider

	.black-slider



	CREATE YOUR OWN COLOR - EXAMPLE:

	.warning-slider .ui-slider .ui-slider-handle{ border-color:#ed9c28; }

	.warning-slider .ui-slider .ui-slider-handle:before,

	.warning-slider .ui-slider .ui-slider-range { background-color:#ed9c28;  }

-->





<div id="eq" class="slider-group purple-slider">

	<div class="sliderv-wrapper"><span>100</span></div>

	<div class="sliderv-wrapper"><span>77</span></div>

	<div class="sliderv-wrapper"><span>55</span></div>

	<div class="sliderv-wrapper"><span>40</span></div>

	<div class="sliderv-wrapper"><span>55</span></div>

	<div class="sliderv-wrapper"><span>77</span></div>

	<div class="sliderv-wrapper"><span>100</span></div>

</div>

/** Place/load this code after scripts.js **/

jQuery(window).ready(function() {



	/** jQuery UI **/

	loadScript(plugin_path + 'jquery/jquery-ui.min.js', function() { 

		/** Enable Mobile Touch Slider **/

		loadScript(plugin_path + 'jquery/jquery.ui.touch-punch.min.js', function() { 

			/** Slider Script **/

			loadScript(plugin_path + 'form.slidebar/jquery-ui-slider-pips.min.js', function() { 



				/** Slider 0

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

				var months 	= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

				var $slidern 	= jQuery("#slider").slider({

					range: "min",

					animate: true,

					min: 0,

					max: 11,

					value: 5			

				});

				

				$slidern.slider("pips", { rest: "label", labels: months });

				$slidern.slider("float" , { labels: months });

				$slidern.on("slidechange", function(e,ui) {

					jQuery("#monthOutput").text(months[ui.value]);

				});





				/** Slider 1

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

				var $slider1 = jQuery("#slider1").slider({

					range: true,

					animate: true,

					min: 0,

					max: 10,					

					values: [2, 8]

				});	

				

				jQuery("#slider1").slider("pips", { first: "pip", last: "pip" });







				/** Slider 2

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

				jQuery( "#slider2" ).slider({

					range: "min",

					animate: true,

					value: 299,

					min: 99,

					max: 499,

					step: 100,

					slide: function(event, ui) {

						jQuery("#amount").val("$" + ui.value);

					}

				});

							

				jQuery("#amount").val( "$" + jQuery("#slider2").slider("value"));

				jQuery("#slider2").slider("pips", { rest: "label", prefix: "$", suffix: "" });

				jQuery("#slider2").slider("float", { prefix: "$", suffix: "", pips: true });







				/** Slider 3

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

				jQuery("#slider3").slider({

					range: "max",

					animate: true,

					min: 1,

					max: 10,

					value: 2,

					slide: function(event, ui) {

						jQuery("#bedrooms").val(ui.value);

					}

				});

				

				jQuery("#bedrooms").val( $("#slider3").slider("value"));

				jQuery("#slider3").slider("pips",{ rest: "label" });







				/** Slider 4

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

				var select 		= jQuery("#guests");

				var guestnumber = jQuery("#slider4").slider({

					min: 1,

					max: 10,

					animate: true,

					range: "min",

					value: select[0].selectedIndex + 1,

					slide: function(event, ui) {

						select[0].selectedIndex = ui.value - 1;

					}

				});

				

				jQuery("#guests").change(function() {

					guestnumber.slider("value", this.selectedIndex + 1);

				});

				

				jQuery("#slider4").slider("pips" , {

					rest: false

				});				







				/** Slider 5

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

				jQuery("#slider5").slider({

					value:100,

					animate: true,

					min: 0,

					max: 500,

					step: 50,

					range: "min",

					slide: function(event, ui) {

						jQuery("#donation").val(ui.value);

					}

				});

				

				jQuery("#donation").val(jQuery("#slider5").slider("value"));

				jQuery("#donation").blur(function() {

						jQuery("#slider5").slider("value", jQuery(this).val());

				});





				/** Vertical 1

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

				var $sliderv = jQuery("#eq > .sliderv-wrapper").each(function() {

					var value = parseInt(jQuery(this).text(), 10);

						jQuery(this).empty().slider({

						value: value,

						range: "min",

						step: 10,

						animate: true,

						orientation: "vertical"

					});

				});

				

				$sliderv.slider("pips", { 

					first: "pip", 

					last: "pip"

				});





				/** Vertical 2

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

				var $sliderv1 	= $("#eq2 > .sliderv-wrapper").each(function() {

					var value 	= parseInt(jQuery(this).text(), 10);

						jQuery(this).empty().slider({

						value: value,

						range: "min",

						step: 5,

						animate: true,

						orientation: "vertical"

					});

				});

				

				$sliderv1.slider("pips", { 

					first: "pip", 

					last: "pip"

				});





			});

		});

	});



});