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="margin-bottom-40">
	<div class="margin-bottom-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="margin-bottom-20">
	<div class="slider-wrapper danger-slider">
		<div id="slider1"></div>
	</div>
</div>


<!-- Slider 2 -->
<div class="margin-bottom-40">
	<div class="margin-bottom-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="margin-bottom-40">
	<div class="margin-bottom-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="margin-bottom-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="margin-bottom-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"
				});


			});
		});
	});

});