I tried to change the slider's drag handle with the following CSS entry - as it was proposed in the forum:
.k-slider .k-draghandle {
background-color: rgb(242, 179, 0);
width: 20px;
height: 20px;
top: -8px;
left: -8px;
}
The color is changed indeed. But when I start to drag it turns white.
Is there a way to avoid this?
I have a page with kendoui slider, where i am checking if slider value is valid inside slider change event.
If value isn`t valid, i want to roll back slider value to previous value,
But every time i set slider value (roll back to previous value) inside change event it doesn't work.
For instance, mySlider initial value is 2.
The user is trying set the value to 10 but my validation function returns false (illegal value) and set my Slider back to it's initial value (2).
For some reason, right after that, the value of my Slider has been set up to 10 (the user choise) again(!!)
So practically my validation function has no meaning!!
It happens inside kendo.all.js in the function :
trigger: function (eventName, e) {
var that = this, events = that._events[eventName], idx, length;
if (events) {
e = e || {};
e.sender = that;
e._defaultPrevented = false;
e.preventDefault = preventDefault;
e.isDefaultPrevented = isDefaultPrevented;
events = events.slice();
for (idx = 0, length = events.length; idx < length; idx++) {
events[idx].call(that, e); ////////////////////////////////////////////////Here it change back to the user choise
}
return e._defaultPrevented === true;
}
return false;
},
My Code:
var slider =$("#slider").kendoSlider({
orientation: "vertical",
smallStep:1000,
largeStep:5000,
min:0,
max:100000,
value:50000,
change:Calc
});
function Calc(e){
if (!(IsValid(e.value)))
{
$("#slider").data("kendoSlider").value(prevVal);
}
} ////////////////////////////////////////////////Here it calls to:trigger: function (eventName, e) which written above
Is there some any way to do it?
Tanks.
<
div
>
@{
Html.Kendo().RangeSlider<
double
>()
.Name("theRangeSlider")
.Min(0).Max(100)
.SmallStep(1)
.LargeStep(10)
.Values(new double[] { Model.LowLimit, Model.HighLimit })
.Events(e => e.Slide("onRangeSliderChanged"))
.HtmlAttributes(new { style = "width: 425px;" })
.Render();
}
</
div
>
<
div
>
@{
Html.Kendo().Slider<
double
>()
.Name("theSlider")
.Min(0).Max(1)
.SmallStep(.01)
.LargeStep(0.1)
.Tooltip(t => t.Format("{0:P0}"))
.Value(Model.SliderValue)
.ShowButtons(false)
.Events(e => e.Slide("onSliderChanged"))
.HtmlAttributes(new { style = "width: 425px;" })
.Render();
}
</
div
>
$(
"#theSlider"
).data(
"kendoSlider"
).value(sliderValue);
$(
"#theRangeSlider"
).data(
"kendoRangeSlider"
).value([lowerValue, higherValue]);
//Have also tried:
$(
"#theRangeSlider"
).data(
"kendoRangeSlider"
).values([lowerValue, higherValue]);
$(
"#theRangeSlider"
).data(
"kendoRangeSlider"
).value(lowerValue, higherValue);
$(
"#theRangeSlider"
).data(
"kendoRangeSlider"
).values(lowerValue, higherValue);
$(
"#theRangeSlider"
).data(
"kendoRangeSlider"
).values()
the values are exactly as I set them. The slider just does not change.
HI,
I have a slider:
@(Html.Kendo().Slider<int>()
.Name("yearSlider")
.IncreaseButtonTitle("-")
.DecreaseButtonTitle("+")
.Min(2016)
.Max(2019)
.SmallStep(1)
.LargeStep(1)
.Value(2016)
.HtmlAttributes(new { @class = "yearSlider" }))
The year is displayed as "2,016". How do I make it show "2016" (no comma)?
thanks
I have a page where slider control options max value get updated as the user makes selections on the page.
The rebuild event occurs fine, and tick marks reflect the new max. However the value defaults to minimum and does not keep the value previously bound to the control.
I have wired up $scope.$on for both kendoWidgetCreated and kendoRendered and try to re-apply the value in these events but the result is the same, the slider does not reflect the value set in either event and defaults to the slider min value again.
What other events should I listen for, or otherwise, how can I set the slider value after the page has been rebound to new data and the slider has new options?
I can initialize the slider from both class and id property.
However, I can't get the value when the slider is instantiated from class:
The second console.log below produces "Cannot read property 'value' of undefined"
$(
"#slider"
).kendoSlider({
min:0,
max:100,
value: 10,
smallStep: 10,
largeStep: 50,
showButtons:
false
});
$(
".slider"
).kendoSlider({
min:0,
max:100,
value: 20,
smallStep: 10,
largeStep: 50,
showButtons:
false
});
var
$sliderFromId = $(
"#slider"
).data(
"kendoSlider"
);
console.log($sliderFromId.value());
var
$sliderFromClass = $(
".slider"
).data(
"kendoSlider"
);
console.log($sliderFromClass.value());
Hi,
I am upgrading to Kendo UI Pro 2015.3.1111 and have this error: 'Cannot read property 'draggable' of undefined' with the RangeSlider widget. This happens each time when I grab an end of the range and drag it.
I can reproduce the error by choosing to edit your example at http://demos.telerik.com/kendo-ui/slider/api and then running the example and sliding the range slider. I see the example is using the exact same version
Any idea when this would be fixed or is it already on the radar?
Cheers,
Rob.