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:3000px;">
    <div style="position: absolute;
  left: 400px;
  width: 100%;">
        <input ng-model="value3"  type="text" id="{{id}}" slider options="options2" ng-disabled="disabled" />
    </div>
</div>

CSS

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

.jslider{position:relative;top:.6em;cursor:pointer;display:block;width:100%;height:1em;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.jslider.disabled{opacity:.5}.jslider table{border-collapse:collapse;border:0;width:100%}.jslider table td,.jslider table th{width:100%;border:0;padding:0;text-align:left;vertical-align:top}.jslider div.jslider-bg i,.jslider div.jslider-pointer{background:url(https://raw.githubusercontent.com/darul75/ng-slider/master/dist/img/jslider.png) no-repeat 0 0}.jslider div.jslider-bg{position:relative}.jslider div.jslider-bg i{position:absolute;top:0;height:5px}.jslider div.jslider-bg i.left{left:0;width:50%;background-position:0 0}.jslider div.jslider-bg i.right{left:50%;width:50%;background-position:right 0}.jslider div.jslider-bg i.range{position:absolute;top:0;left:20%;width:60%;height:5px;z-index:1;background-repeat:repeat-x;background-position:0 -40px}.jslider div.jslider-bg i.default{left:0;width:1px;z-index:1;background-color:#185f83}.jslider.jslider-single div.jslider-pointer-to,.jslider.jslider-single div.jslider-value-to,.jslider.jslider-single div.jslider-bg .v,.jslider.jslider-single .jslider-limitless .jslider-label{display:none}.jslider div.jslider-pointer{position:absolute;top:-4px;left:20%;z-index:2;width:15px;height:15px;background-position:2px -60px;margin-left:-8px;cursor:pointer;cursor:hand}.jslider div.jslider-pointer.jslider-pointer-to{left:80%}.jslider div.jslider-pointer.jslider-pointer-hover{background-position:-18px -60px}.jslider div.jslider-label small,.jslider div.jslider-value small{position:relative;top:-.4em}.jslider div.jslider-label{position:absolute;top:-18px;left:0;padding:0 2px;opacity:.4;color:#000;font-size:9px;line-height:12px;white-space:nowrap}.jslider div.jslider-label.jslider-label-to{left:auto;right:0}.jslider...

JavaScript

function ctrl($scope, $filter) {
    $scope.id = "bob";			
    $scope.id2 = "bob";
    $scope.value = "10;50";
    $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.options3 = {				
        from: 1,
        to: 100,
        floor: true,
        step: 1,
        skin: 'blue',
        dimension: " km",
        vertical: false,
        callback: function(value, elt) {
            console.log(value);
        }				
    };
    
    $scope.options4 = {				
        from: 1,
        to: 100,
        floor: true,
        step: 1,
        skin: 'round',
        dimension: " km",
        vertical: false,
        callback: function(value, elt) {
            console.log(value);
        }				
    };
    
    $scope.options5 = {				
        from: 1,
        to: 100,
        floor: true,
        step: 1,
        skin: 'plastic',
       ...