Skip to content

Commit b036610

Browse files
ntachevadimodi
ntacheva
and
dimodi
authored
Slider enhancements (#538)
* docs(slider)event enhancements * Update components/rangeslider/events.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/rangeslider/events.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/rangeslider/events.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/slider/events.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/slider/events.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/slider/events.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/slider/events.md Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Dimo Dimov <[email protected]>
1 parent b20c45a commit b036610

File tree

2 files changed

+165
-11
lines changed

2 files changed

+165
-11
lines changed

‎components/rangeslider/events.md

Lines changed: 114 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,35 @@ position: 20
1212

1313
This article showcases the available events in the Telerik RangeSlider component:
1414

15-
1615
* [StartValueChanged and EndValueChanged](#startvaluechanged-and-endvaluechanged)
16+
* [OnChange](#onchange)
1717

1818
## StartValueChanged and EndValueChanged
1919

2020
`StartValueChanged` fires when the user moves the lower range of the slider, and `EndValueChanged` fires when the user changes the higher range of the slider.
2121

22-
The `ValueChanged` events fire every time the corresponding `Value` parameter changes. This happens after the user stops dragging the handle or when they click on the track.
22+
The `ValueChanged` events fire every time the corresponding `Value` parameter changes. This happens while the user is dragging the handle or when they click on the track.
2323

24-
The events do not fire continuously while the user is dragging the handle because that would re-render the component and cause both poor performance, and the user to stop dragging because the element they are dragging will disappear.
24+
>tip As of version 2.28.0 of Telerik UI for Blazor, the `ValueChanged` events fire continuously while the user is dragging the handle to ensure updating the value accordingly and deliver live UX. Thus, the component will re-render multiple times during the dragging process. If you want to avoid that, you can handle the [`OnChange`](#onchange) event instead.
2525
26-
>caption Handle StartValueChanged and EndValueChanged to filter products
26+
>caption Handle the StartValueChanged and EndValueChanged to filter products
2727
2828
````CSHTML
2929
@* This example showcases one-way data binding by using Value and ValueChanged
3030
It also shows how you could filter data based on the user selection in the slider *@
3131
3232
from @StartValue to @EndValue
33-
<br /><br />
33+
<br />
34+
<br />
3435
3536
<TelerikRangeSlider StartValue="@StartValue" StartValueChanged="@( async (decimal v) => await StartValueChangedHandler(v) )"
3637
EndValue="@EndValue" EndValueChanged="@( async (decimal v) => await EndValueChangedHandler(v) )"
3738
SmallStep="10m" LargeStep="20m" Min="0m" Max="170m" Width="500px">
3839
</TelerikRangeSlider>
3940
41+
<br />
42+
<br />
43+
4044
<ul>
4145
@foreach (Product item in Products)
4246
{
@@ -97,7 +101,7 @@ from @StartValue to @EndValue
97101
98102
private static void EnsureData()
99103
{
100-
if(_data == null || _data.Count < 1)
104+
if (_data == null || _data.Count < 1)
101105
{
102106
_data = new List<Product>();
103107
for (int i = 1; i < 30; i++)
@@ -120,6 +124,110 @@ from @StartValue to @EndValue
120124

121125
@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
122126

127+
## OnChange
128+
129+
The `OnChange` event represents a user action - confirmation of the current value. It fires when the user stops dragging the handle or when they click on the track.
130+
131+
The handler receives an object of type `RangeSliderChangeEventArgs` which exposes the following fields:
132+
133+
* `StartValue` - the new lower value of the slider that marks the range start.
134+
* `EndValue` - the new higher value of the slider that marks the range end.
135+
136+
If you use two-way binding, this will effectively fire the [`StartValueChanged and EndValueChanged`](#startvaluechanged-and-endvaluechanged) events while the user is dragging the handle. This will result in continuous component re-rendering. If you want to avoid that, use one-way binding and update the value for the view-model in the `OnChange` event handler.
137+
138+
>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms.
139+
140+
>caption Handle the OnChange event to filter products
141+
142+
````CSHTML
143+
@* This example showcases one-way data binding and handling the OnChange event to update the view-model.
144+
If you want to update the value while the user drags the handle, you can additionally use two-way binding or handle the ValueChanged event.
145+
It also shows how you could filter data based on the user selection in the slider *@
146+
147+
from @StartValue to @EndValue
148+
<br />
149+
<br />
150+
151+
<TelerikRangeSlider StartValue="@StartValue"
152+
EndValue="@EndValue"
153+
OnChange="@OnChangeHandler"
154+
SmallStep="10m" LargeStep="20m" Min="0m" Max="170m" Width="500px">
155+
</TelerikRangeSlider>
156+
157+
<br />
158+
<br />
159+
160+
<ul>
161+
@foreach (Product item in Products)
162+
{
163+
<li>Product @item.Name costs <strong>@item.Price.ToString("C2")</strong></li>
164+
}
165+
</ul>
166+
167+
@code{
168+
decimal StartValue { get; set; } = 30m;
169+
decimal EndValue { get; set; } = 40m;
170+
171+
List<Product> Products { get; set; } = new List<Product>();
172+
173+
async Task OnChangeHandler(RangeSliderChangeEventArgs args)
174+
{
175+
// update the view-model to let the change render.
176+
// if you avoid that, you will effectively cancel the event
177+
StartValue = (decimal)args.StartValue;
178+
EndValue = (decimal)args.EndValue;
179+
180+
Console.WriteLine($"The user has now chosen {StartValue} for the LOWER range and {EndValue} for the HIGHER range");
181+
182+
await FilterProducts();
183+
}
184+
185+
//sample business logic follows below
186+
187+
async Task FilterProducts()
188+
{
189+
Products = await MyService.GetProducts(StartValue, EndValue);
190+
}
191+
192+
protected override async Task OnInitializedAsync()
193+
{
194+
await FilterProducts();
195+
}
196+
197+
// this mimics an actual service
198+
public static class MyService
199+
{
200+
private static List<Product> _data { get; set; }
201+
public static async Task<List<Product>> GetProducts(decimal low, decimal high)
202+
{
203+
EnsureData();
204+
var filteredProducts = _data.Where(p => p.Price >= low && p.Price <= high);
205+
return await Task.FromResult(filteredProducts.ToList());
206+
}
207+
208+
private static void EnsureData()
209+
{
210+
if (_data == null || _data.Count < 1)
211+
{
212+
_data = new List<Product>();
213+
for (int i = 1; i < 30; i++)
214+
{
215+
_data.Add(new Product { Name = $" Name {i}", Price = 3.14m * i * 2 });
216+
}
217+
}
218+
}
219+
}
220+
221+
public class Product
222+
{
223+
public decimal Price { get; set; }
224+
public string Name { get; set; }
225+
}
226+
}
227+
````
228+
229+
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
230+
123231

124232
## See Also
125233

‎components/slider/events.md

Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,27 @@ position: 20
1313
This article showcases the available events in the Telerik Slider component:
1414

1515
* [ValueChanged](#valuechanged)
16+
* [OnChange](#onchange)
1617

1718
## ValueChanged
1819

19-
The `ValueChanged` event fires every time the `Value` parameter changes. This happens when the user clicks or taps the increase/decrease buttons; and after the user stops dragging the handle; and when the user clicks on the track.
20+
The `ValueChanged` event fires every time the `Value` parameter changes. This happens when the user:
21+
* clicks on the increase/decrease buttons;
22+
* clicks on the track;
23+
* while dragging the handle;
2024

21-
The event does not fire continuously while the user is dragging the handle because that would re-render the component and cause both poor performance, and the user to stop dragging because the element they are dragging will disappear.
25+
>tip As of version 2.28.0 of Telerik UI for Blazor, the `ValueChanged` event fires continuously while the user is dragging the handle to ensure updating the value accordingly and deliver live UX. Thus, the component will re-render multiple times during the dragging process. If you want to avoid that, you can handle the [`OnChange`](#onchange) event instead.
2226
23-
>caption Handle ValueChanged
27+
>caption Handle the ValueChanged
2428
2529
````CSHTML
2630
@*This example showcases one-way data binding by using Value and ValueChanged*@
2731
2832
@TheValue
29-
<br /><br />
33+
<br />
34+
<br />
3035
<TelerikSlider Value="@TheValue" ValueChanged="@( (int v) => ValueChangedHandler(v))"
31-
SmallStep="10" LargeStep="20" Min="0" Max="100" Width="500px">
36+
SmallStep="5" LargeStep="20" Min="0" Max="100" Width="500px">
3237
</TelerikSlider>
3338
3439
@code{
@@ -49,6 +54,47 @@ The event does not fire continuously while the user is dragging the handle becau
4954

5055
@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
5156

57+
## OnChange
58+
59+
The `OnChange` event represents a user action - confirmation of the current value. It fires when the user:
60+
* clicks on the increase/decrease buttons;
61+
* clicks on the track;
62+
* after the user stops dragging the handle;
63+
64+
If you use two-way binding, the [`ValueChanged`](#valuechanged) event will fire continuously while the user is dragging the handle. This will result in continuous component re-rendering. If you want to avoid that, use one-way binding and update the value for the view-model in the `OnChange` event handler.
65+
66+
67+
>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms.
68+
69+
>caption Handle the OnChange event
70+
71+
````CSHTML
72+
@* This example showcases one-way data binding and handling the OnChange event to update the view-model.
73+
If you want to update the value while the user drags the handle, you can additionally use two-way binding or handle the ValueChanged event.*@
74+
75+
@result
76+
<br />
77+
<br />
78+
<TelerikSlider Value="@TheValue" OnChange="@OnChangeHandler"
79+
SmallStep="5" LargeStep="20" Min="0" Max="100" Width="500px">
80+
</TelerikSlider>
81+
82+
@code{
83+
string result;
84+
85+
int TheValue { get; set; } = 30;
86+
87+
async Task OnChangeHandler(object value)
88+
{
89+
// update the view-model to let the change render.
90+
// if you avoid that, you will effectively cancel the event
91+
TheValue = (int)value;
92+
result = $"The user selected: {(int)value}";
93+
}
94+
}
95+
````
96+
97+
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
5298

5399
## See Also
54100

0 commit comments

Comments
 (0)