Hi. This issue can be replicated in the Telerik dojo for the jQuery Slider.

When tabbing to the decrease and increase buttons and pressing space to invoke the action, nothing happens. I can see the graphical affect of the button being pushed but there is no change in value of the slider.

Tabbing onto the central slider value and moving left and right using the arrow keys works as expected.

Here's what I reckon should happen when using the keyboard with the slider: When the user tabs to the increase/decrease button to give it focus, a press of the spacebar activates the button. The slider value should change accordingly and the focus should stay on the button.

Strangely, when NVDA is active, tabbing to the increase or decrease buttons and pressing spacebar key works the first time. It then shifts focus to the slider itself and I have to start using the left and right arrows instead.

Any thoughts on how to work around this as the built in events are not triggered?

Hello,

I'm reading some datasets from a database and use the values to fill a grid - and on the other hand fill a small form.

The form contains among others a rangeslider.  After a quick Google search I was pointed to the Telerik Forums.

So now I do it with the following code-section

   var rangeslider = $("#rangeslider").data("kendoRangeSlider");
   var rangeValues = [currentDataItem.MinPosition, currentDataItem.MaxPosition];
   rangeslider.setOptions({
      min: 0,
      max: currentDataItem.MaxPositionMeter,
      smallStep: 1,
      largeStep: 10,
      tickPlacement: "both"
   });
   rangeslider.value(rangeValues);

My problem is :
exemplary section of the data-grid
0, 704, 800
48, 752, 800
96, 800, 800

the first 2 numbers "serve" value-array and 800 as the max-parameter.
First 2 lines get displayed correctly, but the 3rd row behaves wierdly. The selection start-marker is displayed correctly, but whatever data-row was displayed at first, determines where the selection-end marker of the rangeslider is drawn, so it doesn't "move" - and the selection-range is displayed with correct length - but as the selection-end marker is not at the correct position the selection suddenly goes beyond  the selection-start marker.

Is there anything I can do to prevent this weird behavior? Is it a problem when the value for selection-end is equal to max?

For reference I include a screenshot of the rangeslider drawn when going from data-row 2 to row 3

The min-value is always 0 for all 3 data-rows

Like subject says - I build in a rangeslider. Now I want it drawn to "scale" => width: 780px ... but every attempt so far has failed 

I tried style= in the <div  it self, then I found you api description , so I build the exact same code from the api-description in my document.ready() function .. only to be greeted with the subject line "rs.resize() is not a function ...

As the remaining Kendo ui stuff is working and also the rangeslider does "everything else" .. conforms to the properties I set in the definition ... 
I'm at the moment without any clue what could lead to the described error message

Every help is welcome

$(document).ready(function () {
 $("#rangeslider").kendoRangeSlider({
                change: rangeSliderOnChange,
                slide: rangeSliderOnSlide,
                min: 0,
                max: 780,
                smallStep: 1,
                largeStep: 10,
                tickPlacement: "both",
            });
            var rs = $("#rangeslider").getKendoRangeSlider();
            rs.wrapper.css("width", "780px");
            rs.resize();
});

I have a 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.

slider.resize();

This seems to work as the slider updates to the properties I set in setOptions.  But 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.

Are there any updates on this topic ? Since I am using Kendo UI slider with razor view having version 2017.2.621.545 and I am not able to get it works in mobile devices specially on iPhone.
The code is as follows - 
 @(Html.Kendo().SliderFor(m => m.PercentChanceClose)
                        .Name("PercentChanceClose")
                        .ShowButtons(true)
                        .Tooltip(true)
                        .Max(100)
                        .Min(0)
                        .SmallStep(5)
                        .LargeStep(10)
                        .Events( e => e.Change("SliderChange"))
                        .IncreaseButtonTitle("Perecent(%) Chance Close")
                        .HtmlAttributes(new { @class = "form-control"})
                        )

JavaScript function - 

 function SliderChange(e) {

        if (e== null) {
            SliderValue(50);
        }
        else {
            SliderValue(e.value);
        }

    }


    function SliderValue(x) {
        var top = $("#PercentChanceClose").closest(".k-slider-wrap");

        if (x >= 0 && x <= 24) {
            $(".k-slider-track", top).css("background-color", "#00ff00");
            $(".k-slider-selection", top).css("background-color", "#00ff00");
          }
        else if (x >= 25 && x <= 74) {
            $(".k-slider-track", top).css("background-color", "#ffa500");
            $(".k-slider-selection", top).css("background-color", "#ffa500");
        }
        else {
            $(".k-slider-track", top).css("background-color", "#ff0000");
            $(".k-slider-selection", top).css("background-color", "#ff0000");
        }
    }

I'm trying out the native Angular 4 components, and I'm starting with the Slider. I was really surprised not to have value labels for the ticks. You can see that in the current documentation: http://www.telerik.com/kendo-angular-ui/components/inputs/slider/

Not having them as the default wouldn't surprise me much, but there doesn't seem to be a way to turn them on on the API: http://www.telerik.com/kendo-angular-ui/components/inputs/api/SliderComponent/

The slider in kendo-ui had this feature. Am I just missing something?

Hello, one would expect the slider to change when dragging the slider handle on a touch device. Does the widget not support touch/drag gestures in mobile devices?

Thanks,
Bernd

The change event is not fired when I change values using the API.

https://dojo.telerik.com/@normpetroff/itoqUquY