AngularJs est un très bon framework javascript et combiné avec des plugins préexistant, il devient imbattable.

Ci-dessous, le code pour une directive pour utiliser l’excellent plugin fd-slider avec angularJs et lié par binding une textbox et un slider.

  .directive('fdSlider', ["$parse", function ($parse) {
        return function (scope, elm, attrs) {
            var scaleStr = attrs.scale || "{}";
            var scale = $.parseJSON(scaleStr);
            if ("fdSlider" in window) {
                fdSlider.createSlider({
                    // Associate an input
                    inp: elm[0],
                    // Declare a step
                    step: attrs.step || 1,
                    // Declare a maxStep (for keyboard users)
                    maxStep: attrs.step || 1,
                    // Min value
                    min: attrs.min || 1,
                    // Max value
                    max: attrs.max || 100,
                    // Define a scale (multiple points supported, I'm just using one for the
                    // demo)
                    scale: scale,
                    callbacks : {
                        "change": [function(inp) {
                            scope.$apply(attrs.sliderModel + "=" + inp.value);
                        }]
                    },
                    // Use the "jump to click point" animation
                    animation: "jump"
                });
            }
        };
    }]);

et un exemple de code html utilisant cette directive :

<input type="number" step="1" min="10" maxStep="100" max="30000"
                        scale='{"25": "10","50": "100","75": "1000","85": "3000","90": "10000"}'
                                slider-model="myScopeModel" fd-slider="" ng-model="myScopeModel"></div>

Votre modèle angularJs:

...
$scope.myScopeModel = 1000;
...

++