AngularJS Example:

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="myApp" ng-controller="ctrl" style="width:300px;margin:20px;">
    <div style="margin-top:10px">
        <input ng-model="value3"  type="text" id="{{id}}" slider options="options"/>
    </div>
  
</div>

CSS

/** 
* @license angular-awesome-slider - v2.4.3
* (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.value3 = 30;
   
    $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: 1440,
        step: 1,
        dimension: ' min',
        callback: function(value, elt) {
            return value + 'hr';
        }
    };
    
    $scope.optionsV = {				
        from: 0,
        to: 1440,
        step: 0.5,
        dimension: " $",
        round: 1,
        scale: [0, '|', 10, '|', 20, '|' , 30, '|', 40],
        heterogeneity: ['50/100', '75/250'],
        vertical: true,
        callback: function(value, elt) {
            return value + 'hr';
        }
        // 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',
        dimension: " km",
        vertical: false,
        callback: function(value, elt) {
   ...