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;">

    <div style="margin-top:100px" ng-show="visible">
        <input ng-model="value"  type="text" id="theSlider" slider options="options2" ng-disabled="disabled" />
    </div>
    <br /><br />
    <input type="button" value="Toggle Visibility" ng-click="toggleVisibility()" />
</div>

CSS

/** 
* @license ng-slider - v2.2.0
* (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/src/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/src/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.value = "10;50";
    $scope.visible = false;
    
    $scope.toggleVisibility = function() {
        $scope.visible = !$scope.visible;
    };			 

    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.options2 = {				
        from: 1,
        to: 100,
        floor: true,
        step: 1,
        dimension: " km",
        vertical: false,
        threshold: 1,
        callback: function(value, elt) {
            console.log(value);
        }				
    };
    
    
    
}

var app = angular.module('myApp', ['ngSlider']).controller('ctrl', ctrl);
/** 
* @license ng-slider - v2.2.2
* (c) 2013 Julien VALERY https://github.com/darul75/ng-slider
* License: MIT 
**/
!function(a){"use strict";a.module("ngSlider",[]).directive("slider",["$compile","$templateCache","$timeout","$window","slider",function(b,c,d,e,f){return{restrict:"AE",require:"?ngModel",scope:{options:"=",ngDisabled:"="},priority:1,link:function(g,h,i,j){function k(){a.element(e).bind("resize",function(){g.slider.onresize()})}if(j){if(!g.options)throw new Error('You must provide a value for "options" attribute.');a.isString(g.options)&&(g.options=a.toJson(g.options)),g.mainSliderClass="jslider",g.mainSliderClass+=" jslider_round",g.mainSliderClass+=g.options.vertical?" vertical ":"",g.mainSliderClass+=g.options.css?" sliderCSS":"",h.after(b(c.get("ng-slider/slider-bar.tmpl.html"))(g,function(a,b){b.tmplElt=a}));var l=!1,m=function(){g.from=""+g.options.from,g.to=""+g.options.to,g.options.calculate&&"function"==typeof g.options.calculate&&(g.from=g.options.calculate(g.from),g.to=g.options.calculate(g.to));var...