Form UI Sliders

  1. Forms
  2. UI Sliders
UI Sliders - Based on jQuery UI
See the bottom of the page for javascript code.
UI Sliders
Select a month:
Show Code 
<!-- 
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>
UI Vertical Sliders
100
77
55
40
55
77
100
100
77
55
40
55
77
100
Show Code 
<!-- 
	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>