AngularJS Example:

by darul75

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="myApp" ng-controller="ctrl" style="width:300px;">
    
    <!-- MULTI -->
    <div ng-repeat="opt in opts">  
	  <input ng-model="value3"  type="text" id="{{id}}" slider ng-disabled="disabled" options="opt" />
    </div>
</div>

CSS

/** 
* @license ng-slider - v2.1.9
* (c) 2013 Julien VALERY https://github.com/darul75/ng-slider
* License: MIT 
**/

.jslider .jslider-bg i,.jslider .jslider-pointer{background:url(https://raw.githubusercontent.com/darul75/ng-slider/master/dist/img/jslider.png) no-repeat 0 0}.jslider.sliderCSS .jslider-pointer{background-color:silver}.jslider.disabled{opacity:.5}.jslider.vertical .jslider-bg i,.jslider.vertical .jslider-pointer{background:url(https://raw.githubusercontent.com/darul75/ng-slider/master/dist/img/jslider.round.png) no-repeat 0 0}.jslider.vertical.sliderCSS .jslider-bg i,.jslider.vertical.sliderCSS .jslider-pointer{background-color:silver;background-image:none}.jslider{cursor:pointer;display:block;width:100%;height:1em;position:relative;top:.6em;font-family:Arial,sans-serif}.jslider table{width:100%;border-collapse:collapse;border:0}.jslider td,.jslider th{padding:0;vertical-align:top;text-align:left;border:0}.jslider.vertical{display:block;width:17px;height:100%;position:relative;top:.6em;font-family:Arial,sans-serif}.jslider.vertical table{height:100%;border-collapse:collapse;border:0}.jslider table,.jslider table tr,.jslider table tr td{width:100%;vertical-align:top}.jslider.vertical table,.jslider.vertical table tr,.jslider.vertical table tr td{height:100%;vertical-align:top}.jslider .jslider-bg{position:relative}.jslider .jslider-bg i{height:5px;position:absolute;font-size:0;top:0}.jslider .jslider-bg .l{width:50%;background-position:0 0;left:0}.jslider .jslider-bg .r{width:50%;left:50%;background-position:right 0}.jslider .jslider-bg .v{z-index:1;position:absolute;width:60%;left:20%;top:0;height:5px;background-repeat:repeat-x;background-position:0 -40px}.jslider .jslider-bg .s{z-index:1;left:0;width:1px;background-color:#185F83}.jslider.sliderCSS .jslider-bg .l{width:100%;left:0;background-color:silver;background-image:none}.jslider.sliderCSS .jslider-bg .p{left:0;width:1px;background-color:transparent;background-image:none}.jslider.sliderCSS...

JavaScript

function ctrl($scope, $filter) {
    $scope.id = "bob";			
    $scope.id2 = "bob";
    $scope.value = "10;15";
    $scope.value2 = "12;15";
    $scope.value3 = 30;
    $scope.value4 = "999;1700";			 
    $scope.value5 = 20;
    $scope.value6 = "10;53";
    
    $scope.disable = function() {
        $scope.disabled = !$scope.disabled;
    };			 

    var calculate = function( value ) {
        var hours = Math.floor( value / 60 );
        var mins = ( value - hours*60 );
        return (hours < 10 ? "0"+hours : hours) + ":" + ( mins == 0 ? "00" : mins );
    };
    
    $scope.options = {				
        from: 0,
        to: 40,
        step: 1,
        dimension: ' min'				
    };
    
    $scope.optionsV = {				
        from: 0,
        to: 40,
        step: 0.5,
        dimension: " $",
        round: 1,
        scale: [0, '|', 10, '|', 20, '|' , 30, '|', 40],
        heterogeneity: ['50/100', '75/250'],
        vertical: true,
        callback: function(value, elt) {
            console.log(value);
        }
        // calculate: calculate
    };
    
    $scope.options2 = {				
        from: 1,
        to: 100,
        floor: true,
        step: 1,
        dimension: " km",
        vertical: false,
        callback: function(value, elt) {
            console.log(value);
        }				
    };
    
    $scope.opts = [$scope.options, $scope.options2];
    
    $scope.options2Css = {				
        from: 1,
        to: 100,
        floor: true,
        step: 1,
        dimension: " km",
        vertical: false,
        css: {
            background: {"background-color": "silver"},
            before: {"background-color": "purple"},
            default: {"background-color": "white"},
            after: {"background-color": "green"},
            pointer: {"background-color": "red"}
        },
        callback: function(value, elt) {
            console.log(value);
        }				
    };
    
  
    
    $scope.options2V = {				
        from: 1,
        to: 100,
       ...