Is it possible to change pointer color of linear gauge dynamically?

[Kent]

Hello.

I want to change the pointer color of linear gauge based on its current value like the colors config of Arc Gauge.

 

Currently I made it with MVVM change event (here's the code).

https://github.com/kent010341/KendoUI-demo/blob/master/mvvm_change_event.html

 

I'm wondering if there's an easier way to make this (such as data-bind the pointer color directly).

 

Thanks.

 

[Kent]

I restructure my repository. Here's the new URL:

https://github.com/kent010341/KendoUI-demo/blob/master/mvvm-demo/mvvm_change_event.html

[Patrick | Technical Support Engineer, Senior]

Hi Kent,

First, thank you for the provided example.

One way in to change the Kendo UI Slider's color is to get the client-side reference, find the element which needs the color to change(in this case, a div with a "k-slider-selection" class), and change the background color with the css method.

Slider and Gauge

 <div id="view">
        <input id="slider"
               data-role="slider" 
               data-min="0" 
               data-max="100" 
               data-show-buttons="false" 
               data-small-step="1" 
               data-large-step="5" 
               data-bind="value: selectedNumber">
      
        <div id="gauge"
             data-role="lineargauge"
             data-pointer="{color: 'lightgreen', size: 5}" 
             data-scale="{minorUnit: 1, min: 0, max: 100, labels: {visible: true, position: 'outside', color: 'white'}}" 
             data-bind="value: selectedNumber"></div>
    </div>

JavaScript

      //Set the inital color fo the Kendo UI Slider
      $(function(){

        //reference the slider with it's ID
        var slider = $("#slider").data("kendoSlider");

        //using jQuery traversing, find the k-slider-selection div
        var sliderSelection = $(slider.element).parent().find("div.k-slider-selection");

        //depending on the value, change the background color
        if (slider.value() >= 60) {
          $(sliderSelection).css("background-color","red");

        } else {
          $(sliderSelection).css("background-color","lightgreen");
        }
      });

      var viewModel = kendo.observable({
        selectedNumber: 30
      });

      viewModel.bind("change", function(e) {
        var valCurr = e.sender.selectedNumber;
        var gauge = $("#gauge").data("kendoLinearGauge");

        //reference the slider with it's ID
        var slider = $("#slider").data("kendoSlider");

        //using jQuery traversing, find the k-slider-selection div
        var sliderSelection = $(slider.element).parent().find("div.k-slider-selection");

        //depending on the value, change the background color
        if (valCurr >= 60) {
          gauge.options.pointer.color = "red";
          $(sliderSelection).css("background-color","red");

        } else {
          gauge.options.pointer.color = "lightgreen";
          $(sliderSelection).css("background-color","lightgreen");
        }
        gauge.redraw();
      })

      kendo.bind($("#view"), viewModel);

Please take a look at the following Progress Kendo UI Dojo which demonstrates the above, and let me know if you have any questions regarding the color change. 

Regards,
Patrick
Progress Telerik

[Kent]

That's a nice example that helps me understand more about the slider and client-side reference.

Hi Patrick,

 

However my question is not changing the color of slider.

The question I described is "is there's a different (or easier) way to do the same thing as my code which can change the pointer color of linear gauge based on the slider's value", such as without using change event.

 

Maybe it's already good enough for this requirement?

Best Regards,

Kent

[Patrick | Technical Support Engineer, Senior]

Hello Kent,

Currently, the easiest way to go to change the Kendo UI Linear Gauge's pointer to a color based on the Kendo UI Slider's value is with the approach you have provided with the change event.  I'm glad the other example helped with gaining a better understanding of the components.  

Regards,
Patrick
Progress Telerik