Measure the Slider Handle Position
Environment
| Product | Slider for Blazor |
| Version | 15.0.1 and above |
Description
How to get the position of the Slider handle?
How to display a value below the Slider handle while the user drags it?
Solution
The Slider does not expose the handle coordinates through a parameter or event. To position a value below the handle of a horizontal Slider, wrap the component in a positioned element and measure the rendered handle with JavaScript interop. Use the ValueChanged event to request a new measurement while the user drags the handle.
The following example demonstrates how to measure the Slider handle position:
Measure the Slider handle position
@inject IJSRuntime JS
<div @ref="@SliderWrapper" class="slider-wrapper">
<TelerikSlider TValue="int"
Value="@SliderValue"
ValueChanged="@((int newValue) => OnSliderValueChanged(newValue))"
Min="0"
Max="100"
SmallStep="1"
LargeStep="20"
Width="400px" />
<span class="slider-value" style="left:@($"{HandleLeft}px")">@SliderValue</span>
</div>
<style>
.slider-wrapper {
position: relative;
width: 400px;
padding-bottom: 30px;
}
.slider-value {
position: absolute;
top: 100%;
transform: translateX(-50%);
}
</style>
@code {
private ElementReference SliderWrapper { get; set; }
private int SliderValue { get; set; } = 33;
private double HandleLeft { get; set; }
private bool HandlePositionNeedsUpdate { get; set; } = true;
private void OnSliderValueChanged(int newValue)
{
SliderValue = newValue;
HandlePositionNeedsUpdate = true;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender || HandlePositionNeedsUpdate)
{
HandlePositionNeedsUpdate = false;
HandleLeft = await JS.InvokeAsync<double>("sliderInterop.getHandleLeft", SliderWrapper);
await InvokeAsync(StateHasChanged);
}
}
}Add the following function to a JavaScript file loaded by the application:
Add the JavaScript function that measures the Slider handle position
window.sliderInterop = {
getHandleLeft: function (wrapper) {
var handle = wrapper.querySelector(".k-draghandle");
if (!handle) {
return 0;
}
var wrapperRect = wrapper.getBoundingClientRect();
var handleRect = handle.getBoundingClientRect();
return handleRect.left - wrapperRect.left + handleRect.width / 2;
}
};The returned value is relative to the wrapper. getBoundingClientRect() returns viewport coordinates, so recalculate the position after window resizing or other layout changes. For a vertical Slider, measure the top values instead of the left values.