When using the slider with AngularJs, if I try to set a min or max value for the slider, the tick marks disappear - not sure if I'm doing something wrong or it's a bug...
<!DOCTYPE html><html><head> <base href="http://demos.telerik.com/kendo-ui/slider/angular"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.mobile.min.css" /> <script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script></head><body><div id="example" ng-app="KendoDemos"> <div class="demo-section k-content" ng-controller="MyCtrl"> <div> <h3>Ticks...</h3> <input kendo-slider ng-model="value" /> </div> <br><br> <div> <h3>No Ticks...</h3> <input kendo-slider ng-model="value" k-options="options" /> </div> </div></div><script> angular.module("KendoDemos", [ "kendo.directives" ]) .controller("MyCtrl", function($scope){ $scope.value = 0; $scope.options = { max: 100 } })</script></body></html>1 Answer, 1 is accepted
0
Claire
Top achievements
Rank 1
Rank 1
answered on 10 Jan 2017, 05:27 AM
Of course, as soon as I posted this I answered my own question - it seems to work if you add a width to the input -
Instead of -
<input kendo-slider ng-model="value" k-options="options" />
I tried -
<input kendo-slider ng-model="value" k-options="options" style="width:100%" />
And it seems to work!