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/master/dist/rzslider.js"></script>
<p>Use desktop browsers to see unexpected scrollbar!</p>
<div ng-app="myapp">
<div ng-controller="TestController as vm">
<p class="priceContainer">{{vm.priceSlider.value/10e6}} * 10<sup>6</sup></p>
<div class="sliderContainer">
<rzslider rz-slider-model="vm.priceSlider.value" rz-slider-options="vm.priceSlider.options"></rzslider>
</div>
</div>
</div>
CSS
.priceContainer {width: 80px; height: 40px; background: orange; overflow: auto;}
.sliderContainer {width: 80px; height: 300px; background: pink; overflow: auto;}
JavaScript
var myApp = angular.module('myapp', ['rzModule']);
myApp.controller('TestController', TestController);
function TestController() {
var vm = this;
vm.priceSlider = {
value: 20e6,
options: {
floor: 10e6,
ceil: 100e6,
step: 1e6,
vertical: true,
hidePointerLabels: false,
hideLimitLabels: true,
}
}
}