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?
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
my js-code for that matter$(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();
});
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
I'm using the jQuery implementation of the range slider in an angular project (because I don't see a range slider component for angular yet, only a single value slider). I have this working by including the scripts locally, however, I'd like to pull them in via npm upon the bundling of the app via webpack.
Here are the entries from my angular-cli.json. Webpack compiles successfully, however, scripts.bundle.js complains that the module related to kendo.all.js is not defined.
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/@progress/kendo-theme-default/dist/all.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/sortablejs/Sortable.min.js",
"../node_modules/@progress/kendo-ui/js/kendo.all.js"
],
The result is that kendo.all.js looks the same as its entry in scripts.bundle.js.
I'm aware that I can include less than ALL to use the range slider, but I'm just trying to get this working first.