Skip to content

Instantly share code, notes, and snippets.

@menacestudio
Created March 17, 2015 22:47
Show Gist options
  • Save menacestudio/dd5a95ef07857969c61d to your computer and use it in GitHub Desktop.
Save menacestudio/dd5a95ef07857969c61d to your computer and use it in GitHub Desktop.
An AngularJS slider directive
slider.$inject = [];
function slider() {
return <ng.IDirective>{
restrict: 'E',
replace: true,
scope: {
model: '=ngModel',
isRequired: '=',
min: '=',
max: '=',
step: '='
},
transclude: true,
template:
'<input type="text" data-ng-required="isRequired" model="model" class="span2" value="{{model}}" data-slider-value="-14" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="hide" />',
link: link
}
function link($scope, $element, $attrs) {
var $counter = angular.element('<span class="badge" style="margin-left: 5px;">0</span>');
$element.after($counter);
$element.slider({
max: $scope.max,
min: $scope.min,
step: $scope.step
}).on('slideStop', function ($event) {
$scope.model = $event.value;
$counter.html($scope.model);
});
$scope.swipe = function() {
console.log('swiping');
}
}
}
angular.module('app').directive('slider', slider);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment