Question

I am working on an hexagonal pattern generator that uses KendoUI widgets as GUI.

I am trying to implement a Randomize() function that would animate the slider handles to a random position. The function is called when clicking the Randomize! button.
This should generate a slide or change event on the Kendo slider which in turn would fire the changeYcomp(e) callback that calls the init() function updating the pattern.

Markup for the slider:

 <div class="sliderwrapper" id="yslider">
                            <label for="ycompSlider">Y variation</label>
          <input id="ycompSlider" class="slider" />
 </div>

Script for the callback:

function changeYcomp(e) {
    kendoConsole.log("New slide value is: " + e.value);
    ycomp = e.value;
    init();
}

Parameters assignment for the slider:

$("#ycompSlider").kendoSlider({
                                slide: changeYcomp,
                                change: changeYcomp,
                                min: -10,
                                max: 10,
                                smallStep: 1,
                                largeStep: 10,
                                value: 0
                            });

Randomize function:

function Randomize() {
    console.log("Randomizing!")
    $("#yslider .k-draghandle").animate({
      left: Math.round(Math.random()*130-7)
    });

}

Unfortunately neither changing the .k-draghandle position via CSS animation, nor changing any of the slider’s HTML attributes fires any event.

I am assuming that the slider is listening for mouse events only.

For now the only alternative would be to manage the slider handle position and the updating function separately by adding step functionality on the animation.

I would like to avoid this as it would either force some redesign or involve duplication.

Help appreciated.

Answer 1

You can use the trigger() function on a widget to fire its events:

$("#yslider").data("kendoSlider").trigger("slide", { value: 123 });

The caveat is that you have to specify the event object that it passes to the callbacks. Fortunately the event for slide only contains the value property.

So you can do:

var slider = $("#slider").data("kendoSlider");
slider.value(5);
slider.trigger("slide", { value: slider.value() });

See this jsFiddle for a working example.