# Slider for Bootstrap bootstrap-slider.js

Examples for the bootstrap-slider component.

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

### Example 12:

Coloring the left and right track segments.

Single-value slider, right track:
Note that there is no left track on the single-value slider. The area to the left of the handle is the selection.
Range slider, left track:
Range slider, left and right tracks, and selection:

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

    Single-value slider, right track:
    <input id="ex12a" type="text"/><br/>
    Note that there is no left track on the single-value slider. The area to the left of the handle is the selection.

    Range slider, left track:
    <input id="ex12b" type="text"/><br/>

    Range slider, left and right tracks, and selection:
    <input id="ex12c" type="text"/><br/>

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

    // 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
    new Slider("#ex12a", { id: "slider12a", min: 0, max: 10, value: 5 });
    new Slider("#ex12b", { id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] });
    new Slider("#ex12c", { id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] });

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

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

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

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

### Example 13:

Using tick marks and labels.

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

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

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

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