AngularJS-Slider Issue Report
Fork this Fiddle to show an issue and report it here:
https://github.com/rzajac/angularjs-slider/issues
HTML
<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/showSelectionBarEnd/dist/rzslider.js"></script>
<rzslider class="custom-slider"
rz-slider-model="slider.minValue"
rz-slider-high="slider.maxValue"
rz-slider-options="slider.options"></rzslider>
CSS
.custom-slider.rzslider .rz-bar {
background: #ffe4d1;
height: 2px;
}
.custom-slider.rzslider .rz-selection {
background: orange;
}
.custom-slider.rzslider .rz-pointer {
width: 8px;
height: 16px;
top: auto; /* to remove the default positioning */
bottom: 0;
background-color: #333;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.custom-slider.rzslider .rz-pointer:after {
display: none;
}
.custom-slider.rzslider .rz-bubble {
bottom: 14px;
}
.custom-slider.rzslider .rz-limit {
font-weight: bold;
color: orange;
}
.custom-slider.rzslider .rz-tick {
width: 1px;
height: 10px;
margin-left: 4px;
border-radius: 0;
background: #ffe4d1;
top: -1px;
}
.custom-slider.rzslider .rz-tick.rz-selected {
background: orange;
}
JavaScript
$scope.slider = {
minValue: 10,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true
}
};