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
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();
});
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.
var slider = $("#slider").data("kendoSlider");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