Current state

public/assets/js/slider.js

@@ -0,0 +1,94 @@
+$(function () {
+
+    /*  Slider with decimal option  */
+    $("#slider3").rangeSlider({
+        formatter: function (val) {
+            var value = Math.round(val),
+                decimal = value - Math.round(val);
+            return decimal == 0 ? value.toString() + ".0" : value.toString();
+        }
+    });
+
+    /*  Slider with min and max values  */
+    $("#slider4").rangeSlider({
+        range: {
+            min: 10,
+            max: 40
+        }
+    });
+
+    /*  Slider with ruler  */
+    $("#slider5").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;
+                }
+            }
+        ]
+    });
+
+    /*  Slider with date ruler  */
+    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
+
+    $("#slider6").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, 7, 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() + 2));
+            },
+            label: function (value) {
+                return months[value.getMonth()];
+            },
+            format: function (tickContainer, tickStart, tickEnd) {
+                tickContainer.addClass("myCustomClass");
+            }
+        }]
+    });
+
+});