jquery-slider

by il kamil

HTML

<script src="http://www.cliptheme.com/preview/admin/clip-one/assets/plugins/jQRangeSlider/jQAllRangeSliders-min.js"></script>
<link rel="stylesheet" href="http://ghusse.github.io/jQRangeSlider/stable/css/iThing.css">
<table class="table table-bordered" width="100%">
    <tr>
        <td>
            <p><strong>Arrows</strong>

            </p>
            <div id="arrows"></div>
        </td>
    </tr>
    <tr>
        <td>
            <p><strong>Bounds</strong>

            </p>
            <div id="bounds"></div>
        </td>
    </tr>
    <tr>
        <td>
            <p><strong>Bound Dates</strong>

            </p>
            <div id="boundsDates"></div>
        </td>
    </tr>
    <tr>
        <td>
            <p><strong>Duration in/out</strong>

            </p>
            <div id="duration"></div>
        </td>
    </tr>
    <tr>
        <td>
            <p><strong>Enabled</strong>

            </p>
            <div id="enable"></div>
        </td>
    </tr>
    <tr>
        <td>
            <p><strong>Step</strong>

            </p>
            <div id="step"></div>
        </td>
    </tr>
    <tr>
        <td>
            <p><strong>Edit</strong>

            </p>
            <div id="edit"></div>
        </td>
    </tr>
    <tr>
        <td>
            <p><strong>Scale</strong>

            </p>
            <div id="scale"></div>
        </td>
    </tr>
    <tr>
        <td>
            <p><strong>Ruler with Month</strong>

            </p>
            <div id="rulerMonth"></div>
        </td>
    </tr>
</table>

CSS

.ui-rangeSlider-withArrows .ui-rangeSlider-container, .ui-rangeSlider-noArrow .ui-rangeSlider-container, .ui-rangeSlider-arrow{
	box-shadow:none;
	border-radius:0;
}
.ui-rangeSlider-arrow{
	background:none;
}
.ui-rangeSlider-container{
	background:#F5F5F5;
	border:1px solid #CCC !important;
}
.ui-rangeSlider-container, .ui-rangeSlider-arrow{
	border:0;
	height:20px;
}

.ui-rangeSlider-bar{
	height:18px;
	border-radius:0;
	box-shadow:none;
}

JavaScript

$("#arrows").rangeSlider();
$("#bounds").rangeSlider({
    bounds: {
        min: 10,
        max: 90
    }
});

$("#boundsDates").dateRangeSlider({
    bounds: {
        min: new Date(2013, 0, 1),
        max: new Date(2014, 11, 31)
    },
    defaultValues: {
        min: new Date(2013, 2, 1),
        max: new Date(2014, 2, 31)
    }
});

$("#duration").rangeSlider({
    valueLabels: "change",
    durationIn: 1000,
    durationOut: 1000
});

$("#enable").rangeSlider({
    enabled: false
});



$("#scale").rangeSlider({
    scales: [
    // Primary scale
    {
        first: function (val) {
            return val;
        },
        next: function (val) {
            return val + 10;
        },
        stop: function (val) {
            return false;
        },
        label: function (val) {
            return val;
        },
        format: function (tickContainer, tickStart, tickEnd) {
            tickContainer.addClass("myCustomClass");
        }
    },
    // Secondary scale
    {
        first: function (val) {
            return val;
        },
        next: function (val) {
            if (val % 10 === 9) {
                return val + 2;
            }
            return val + 1;
        },
        stop: function (val) {
            return false;
        },
        label: function () {
            return null;
        }
    }]
});

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
$("#rulerMonth").dateRangeSlider({
    bounds: {
        min: new Date(2012, 0, 1),
        max: new Date(2012, 11, 31, 12, 59, 59)
    },
    defaultValues: {
        min: new Date(2012, 1, 10),
        max: new Date(2012, 4, 22)
    },
    scales: [{
        first: function (value) {
            return value;
        },
        end: function (value) {
            return value;
        },
        next: function (value) {
            var next = new Date(value);
            return new Date(next.setMonth(value.getMonth() + 1));
 ...