Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Range Slider
Documentation
The RangeSlider is a UI component that allows a user to choose a range of numeric values.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<div class="form">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Default mode</div>
<div class="dx-field-value">
@(Html.DevExtreme().RangeSlider()
.Min(0)
.Max(100)
.Start(20)
.End(60)
)
</div>
</div>
<div class="dx-field custom-height-slider">
<div class="dx-field-label">With labels</div>
<div class="dx-field-value">
@(Html.DevExtreme().RangeSlider()
.Min(0)
.Max(100)
.Start(35)
.End(65)
.Label(l => l
.Visible(true)
.Format(new JS("formatLabel"))
.Position(VerticalEdge.Top)
)
)
</div>
</div>
<div class="dx-field custom-height-slider">
<div class="dx-field-label">With tooltips</div>
<div class="dx-field-value">
@(Html.DevExtreme().RangeSlider()
.Min(0)
.Max(100)
.Start(15)
.End(65)
.Tooltip(t => t
.Enabled(true)
.Format(new JS("formatLabel"))
.ShowMode(SliderTooltipShowMode.Always)
.Position(VerticalEdge.Bottom)
)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Without range highlighting</div>
<div class="dx-field-value">
@(Html.DevExtreme().RangeSlider()
.Min(0)
.Max(100)
.Start(20)
.End(80)
.ShowRange(false)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">With discrete step</div>
<div class="dx-field-value">
@(Html.DevExtreme().RangeSlider()
.Min(0)
.Max(100)
.Start(20)
.End(70)
.Step(10)
.Tooltip(t => t.Enabled(true))
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Disabled</div>
<div class="dx-field-value">
@(Html.DevExtreme().RangeSlider()
.Min(0)
.Max(100)
.Start(25)
.End(75)
.Disabled(true)
)
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">Event Handling and API</div>
<div class="dx-field">
@(Html.DevExtreme().RangeSlider()
.ID("handler-range-slider")
.Min(0)
.Max(100)
.Start(10)
.End(90)
.OnValueChanged("rangeSlider_valueChanged")
)
</div>
<div class="dx-field">
<div class="dx-field-label">Start value</div>
<div class="dx-field-value">
@(Html.DevExtreme().NumberBox()
.ID("start-value")
.Value(10)
.Min(0)
.Max(100)
.ShowSpinButtons(true)
.OnValueChanged("startValue_changed")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">End value</div>
<div class="dx-field-value">
<div id="end-value"></div>
@(Html.DevExtreme().NumberBox()
.ID("end-value")
.Value(90)
.Min(0)
.Max(100)
.ShowSpinButtons(true)
.OnValueChanged("endValue_changed")
)
</div>
</div>
</div>
</div>
<script>
function formatLabel(value) {
return value + "%";
}
function getRangeSliderInstance() {
return $("#handler-range-slider").dxRangeSlider("instance");
}
function rangeSlider_valueChanged(data) {
$("#start-value").dxNumberBox("instance").option("value", data.start);
$("#end-value").dxNumberBox("instance").option("value", data.end);
}
function startValue_changed(data) {
getRangeSliderInstance().option("start", data.value);
}
function endValue_changed(data) {
getRangeSliderInstance().option("end", data.value);
}
</script>
using Microsoft.AspNetCore.Mvc;
namespace DevExtreme.NETCore.Demos.Controllers {
public class RangeSliderController : Controller {
public ActionResult Overview() {
return View();
}
}
}
.custom-height-slider {
height: 75px;
}
.dx-field > .dx-rangeslider {
flex: 1;
}