This is a migrated thread and some comments may be shown as answers.

AngularJS - Tick marks disappear when set min / max values for slider

1 Answer 161 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Claire
Top achievements
Rank 1
Claire asked on 10 Jan 2017, 05:24 AM

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>
    <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

Sort by
0
Claire
Top achievements
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!

Tags
Slider
Asked by
Claire
Top achievements
Rank 1
Answers by
Claire
Top achievements
Rank 1
Share this question
or