Problems with kendo slider after dynamically changing properties using setOptions

user_16504907 0
Viewed 494

I have a kendo slider on a page set to a min/max of 0 and 100. The min/max of this slider is variable and changes depending on what a user has selected in a dropdownlist. For example, when the user selects an item in the dropdownlist, I change the slider's min/max value of 10 and 50 using setOptions.

var slider = $("#slider").data("kendoSlider");
slider.setOptions({
  min: 10,
  max: 50,
  smallStep: 1,
  largeStep: 5,
  value: 10
});
slider.resize();

This seems to work as the slider updates to the properties I set in setOptions. However after I do this, it doesn't consistently let me jump to a value in the slider.

For example, if I try to click the slider line at 40, the slider won't move to it. Sometimes it will, sometimes it won't. If I drag the slider ball to a number it works fine, if I user the increase/decrease arrow buttons it works fine. But clicking on a number in the slider bar does not work.

This jumping to a number in the slider works fine before I dynamically change the properties using setOptions

This problem occurs regardless of what property in the slider I change using setOptions

Any ideas? Thanks.

kendo-ui telerik slider jquery
1 Answers

I would suggest using the min (documentation) and max (documentation) methods to give the options their new values.

By using these methods, the slider worked properly with their new respective min/max config values.

Here is an example where I'm setting the min/max config values based on KendoNumericUpDowns:

<head>
  <meta charset="utf-8">
  <title>Slider Example</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.mobile.all.min.css">
</head>
<body>

  <input id="min" />
  <input id="max" />
  <input id="slider" />

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#min').kendoNumericTextBox({
        decimals: 0,
        format: 'n0',
        label: 'Min',
        min: 1,
        restrictDecimals: true,
        round: true,
        value: 1,
        change: function() {
          var value = parseInt(this.value());
          var nud = $('#max').data('kendoNumericTextBox');
          nud.min(value + 1);
          if (nud.value() < nud.min()) {
            nud.value(value + 1);
          }
          nud.trigger('change');
          var slider = $("#slider").data('kendoSlider');
          slider.min(value);
          if (slider.value() < slider.min()) {
            slider.value(value);
          }
        }
      });
      $('#max').kendoNumericTextBox({
        decimals: 0,
        format: 'n0',
        label: 'Max',
        min: 2,
        restrictDecimals: true,
        round: true,
        value: 2,
        change: function() {
          var value = this.value();
          $("#slider").data('kendoSlider').max(value);
        }
      });
      $("#slider").kendoSlider({
        min: 1,
        max: 2
      });
    });
  </script>
</body>

user_19200350
Related