基于Bootstrup的炫酷jQuery slider插件

Example 1:

Basic example with custom formatter and colored selected region via CSS.


###################
       HTML
###################

<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"/>



###################
    JavaScript
###################

// 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;
	}
});


###################
       CSS
###################

#ex1Slider .slider-selection {
	background: #BABABA;
}

Example 2:

Range selector, options specified via data attribute.

Filter by price interval: € 10 € 1000


###################
       HTML
###################

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>


###################
    JavaScript
###################

// With JQuery
$("#ex2").slider({});

// Without JQuery
var slider = new Slider('#ex2', {});

Example 3:

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.

R

G

B


###################
       HTML
###################

<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>


###################
    JavaScript
###################

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');


###################
       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;
}

Example 4:

Vertical Slider with reversed values (largest to smallest).


###################
       HTML
###################

<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"/>


###################
    JavaScript
###################

// With JQuery
$("#ex4").slider({
	reversed : true
});

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

Example 5:

Destroy instance of slider by calling destroy() method on slider instance via JavaScript.


###################
       HTML
###################

<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>


###################
    JavaScript
###################

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

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

$("#destroyEx5Slider").click(function() {
	
	// With JQuery
	$("#ex5").slider('destroy');

	// Without JQuery
	slider.destroy();
});

Example 6:

Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used.

Current Slider Value: 3


###################
       HTML
###################

<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/&t
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>


###################
    JavaScript
###################

// With JQuery
$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
	$("#ex6SliderVal").text(slideEvt.value);
});

// Without JQuery
var slider = new Slider("#ex6");
slider.on("slide", function(slideEvt) {
	$("#ex6SliderVal").text(slideEvt.value);
});)

Example 7:

Sliders can be enabled and disabled.

Enabled


###################
       HTML
###################

<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


###################
    JavaScript
###################

// 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();
	}
});

Example 8:

Tooltip can always be displayed.


###################
       HTML
###################

<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"/>


###################
    JavaScript
###################

// With JQuery
$("#ex8").slider({
	tooltip: 'always'
});

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

Example 9:

Precision (number of places after the decimal) can be specified.


###################
       HTML
###################

<input id="ex9" type="text"/>

###################
    JavaScript
###################

// 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
});

Example 10:

Setting custom handlers.


###################
 HTML
###################

<input id="ex10" type="text" data-slider-handle="custom"/>


###################
JavaScript
###################

// With JQuery
$("#ex10").slider({});

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

###################
 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;
}

Example 11:

Using a custom step interval.


###################
HTML
###################

<input id="ex11" type="text" data-slider-handle="custom"/>


###################
JavaScript
###################

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

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