New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core Slider API

Loading Demo...

EXAMPLE

VIEW SOURCE
EDIT IN
- Telerik REPL

Also available for:

var sliderPrevState, rangeSliderPrevState; window.demoComponentProperties = { sections: [{ label: "Slider API Functions", controls: [{ type: "segmented", name: "sliderState", options: [{ value: "enabled", label: "Enable" }, { value: "disabled", label: "Disable" }], defaultValue: "enabled" }, { type: "numericTextBox", name: "sliderValue", label: "Value", defaultValue: 1, min: 0, max: 10 }, { type: "button", label: "Set value", onClick: function(values) { $("#slider").data("kendoSlider").value(values.sliderValue); } }, { type: "button", label: "Get value", onClick: function() { alert($("#slider").data("kendoSlider").value()); } }] }, { label: "RangeSlider API Functions", controls: [{ type: "segmented", name: "rangeSliderState", options: [{ value: "enabled", label: "Enable" }, { value: "disabled", label: "Disable" }], defaultValue: "enabled" }, { type: "numericTextBox", name: "startValue", label: "Start value", defaultValue: 1, min: 0, max: 10 }, { type: "button", label: "Set selection start", onClick: function(values) { var widget = $("#rangeslider").data("kendoRangeSlider"); widget.value([values.startValue, widget.value()[1]]); } }, { type: "numericTextBox", name: "endValue", label: "End value", defaultValue: 1, min: 0, max: 10 }, { type: "button", label: "Set selection end", onClick: function(values) { var widget = $("#rangeslider").data("kendoRangeSlider"); widget.values(widget.value()[0], values.endValue); } }, { type: "button", label: "Get value", onClick: function() { alert($("#rangeslider").data("kendoRangeSlider").value()); } }] }], onChange: function(values) { var slider = $("#slider").data("kendoSlider"); if (slider && values.sliderState !== sliderPrevState) { sliderPrevState = values.sliderState; if (values.sliderState === "disabled") { slider.disable(); } else { slider.enable(); } } var rangeslider = $("#rangeslider").data("kendoRangeSlider"); if (rangeslider && values.rangeSliderState !== rangeSliderPrevState) { rangeSliderPrevState = values.rangeSliderState; if (values.rangeSliderState === "disabled") { rangeslider.disable(); } else { rangeslider.enable(); } } } };

Temperature
Humidity

#fieldlist { margin: 0 0 -2em; padding: 0; text-align: center; } #fieldlist > li { list-style: none; padding-bottom: 2em; } #fieldlist label { display: block; padding-bottom: 1em; font-weight: bold; text-transform: uppercase; font-size: 12px; color: #444; }

ASP.NET Core Slider API

Support & Learning Resources

Additional Resources