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

2 posts, 0 answers
  1. Claire
    Claire avatar
    2 posts
    Member since:
    Oct 2016

    Posted 09 Jan Link to this post

    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>

  2. Claire
    Claire avatar
    2 posts
    Member since:
    Oct 2016

    Posted 09 Jan in reply to Claire Link to this post

    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!

Back to Top