Angular Range Slider
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="https://rawgit.com/Venturocket/angular-slider/master/src/angular-slider.js"></script>
<script src="https://rawgit.com/Venturocket/angular-slider/master/src/rangeInputSupported.js"></script>
<script>function dump(obj) {
var out = '';
for (var i in obj) {
out += i + ": " + obj[i] + "\n";
}
return out;
}
angular
.module('duel', ['vr.directives.slider'])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.scopes = [];
$scope.value = 5;
$scope.values = {
low: 4,
high: 7
};
$scope.scale = function (value) {
return Math.pow(value, 3);
};
$scope.inverseScale = function (value) {
var sign = value == 0 ? 1 : (value / Math.abs(value));
return sign * Math.pow(Math.abs(value), 1 / 3);
};
$scope.addScope = function () {
$scope.scopes.push({
values: {
low: 4,
high: 7
},
value: 5
});
};
$scope.translate = function (value) {
return '$' + value;
};
$scope.translateCombined = function (low, high) {
return $scope.translate(low.toFixed($scope.precision)) + " *** " + $scope.translate(high.toFixed($scope.precision));
};
$scope.translateRange = function (low, high) {
return $scope.translate((high - low).toFixed($scope.precision));
};
$scope.fireResizeEvent = function () {
$scope.$broadcast('refreshSlider');
};
}]);</script>
<div id='slider-container' ng-controller="MainCtrl">Floor:
<input type='text' ng-model='floor' ng-init='floor = 1' />
<br />Ceiling:
<input type='text' ng-model='ceiling' ng-init='ceiling = 10' />
<br />Step Width:
<input type='text' ng-model='step' ng-init='step = 1'...
CSS
slider {
display: block;
position: relative;
height: 30px;
width: 500px;
}
slider span.bar {
height: 50%;
z-index: 0;
background: #eee;
left: 0;
top: 25%;
cursor: pointer;
}
slider span.bar.selection, slider span.bar.unselected {
}
slider span.bar.selection {
background: #0a0;
opacity: 0.5;
}
slider span.bar.unselected {
width: auto;
background: #a00;
opacity: 0.5;
}
slider span.pointer {
cursor: pointer;
width: 15px;
top: 0;
bottom: 0;
background-color: #00a;
}
slider span.pointer:hover {
}
slider span.pointer.active {
}
slider span.bubble {
font-size: 0.7em;
line-height: 1.4em;
font-family: sans-serif;
text-align: center;
text-shadow: none;
top: -1.3em;
cursor: pointer;
}
slider span.bubble.selection, slider span.bubble.limit {
top: 25%;
}
slider span.bubble.selection {
}
slider span.bubble.limit {
}
slider span.bubble.low, slider span.bubble.high {
}
::-ms-tooltip {
display: none;
}
#slider-container {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}