Skip to content

Commit fe3b038

Browse files
mckaragozmckaragoz
authored
SpeedDial & RangeSlider: ParameterState (#408)
* SpeedDial & RangeSlider ParameterState * Additions * Contunious Slide and SlideableMin amd SlideableMax Paraemters
1 parent d74db00 commit fe3b038

File tree

6 files changed

+208
-185
lines changed

6 files changed

+208
-185
lines changed

‎CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/RangeSlider/Examples/RangeSliderExample1.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<MudGrid>
44
<MudItem xs="12" sm="8">
5-
<MudRangeSlider @bind-Value="@_value" @bind-UpperValue="@_upperValue" Size="Size.Large" Variant="Variant.Filled" ValueLabel="_valueLabel" Range="_range" TickMarks="_tickmarks"
5+
<MudRangeSlider @bind-Value="@_value" @bind-UpperValue="@_upperValue" Size="Size.Large" Variant="Variant.Filled" ValueLabel="_valueLabel" Range="_range" TickMarks="_tickmarks" Immediate="true"
66
Min="_min" Max="_max" Step="_step" Display="_display" MinDistance="_minDistance" DisableMin="_disableMin" DisableMax="_disableMax" LabelText="@_labelText" UpperLabelText="@($"{_upperLabelText} {_upperValue}")">@_label</MudRangeSlider>
77
</MudItem>
88

@@ -29,8 +29,8 @@
2929
</MudGrid>
3030

3131
@code {
32-
private int? _value = 25;
33-
private int? _upperValue = 75;
32+
private int _value = 25;
33+
private int _upperValue = 75;
3434
string _label = "Range";
3535
bool _valueLabel = true;
3636
bool _display = true;
@@ -47,7 +47,7 @@
4747

4848
void ClearValues()
4949
{
50-
_value = null;
51-
_upperValue = null;
50+
_value = 0;
51+
_upperValue = 50;
5252
}
5353
}

‎CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/RangeSlider/Examples/RangeSliderExample2.razor‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@namespace MudExtensions.Docs.Examples
2+
3+
<MudGrid>
4+
<MudItem xs="12" sm="8">
5+
<MudRangeSlider @bind-Value="@_value" @bind-UpperValue="@_upperValue" Size="Size.Large" Variant="Variant.Filled" ValueLabel="true" Range="true"
6+
Min="_min" Max="_max" SlideableMin="@_slideableMin" SlideableMax="@_slideableMax" Step="_step" Display="true">@_label</MudRangeSlider>
7+
</MudItem>
8+
9+
<MudItem xs="12" sm="4">
10+
<MudStack>
11+
<MudTextField @bind-Value="_label" Label="Label" Variant="Variant.Outlined" Margin="Margin.Dense" />
12+
<MudNumericField @bind-Value="_value" Label="Lower Value" Variant="Variant.Outlined" Margin="Margin.Dense" />
13+
<MudNumericField @bind-Value="_upperValue" Label="Upper Value" Variant="Variant.Outlined" Margin="Margin.Dense" />
14+
<MudNumericField @bind-Value="_min" Label="Min" Variant="Variant.Outlined" Margin="Margin.Dense" />
15+
<MudNumericField @bind-Value="_max" Label="Max" Variant="Variant.Outlined" Margin="Margin.Dense" />
16+
<MudNumericField @bind-Value="_slideableMin" Label="Slideable Min" Variant="Variant.Outlined" Margin="Margin.Dense" />
17+
<MudNumericField @bind-Value="_slideableMax" Label="Slideable Max" Variant="Variant.Outlined" Margin="Margin.Dense" />
18+
<MudNumericField @bind-Value="_step" Label="Step" Variant="Variant.Outlined" Margin="Margin.Dense" />
19+
</MudStack>
20+
</MudItem>
21+
</MudGrid>
22+
23+
@code {
24+
private int _value = 25;
25+
private int _upperValue = 75;
26+
string _label = "Range";
27+
int _min = 0;
28+
int _max = 100;
29+
int? _slideableMin = 10;
30+
int? _slideableMax = 90;
31+
int _step = 1;
32+
}

‎CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/RangeSlider/RangeSliderPage.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,8 @@
55
<ExampleCard ComponentName="RangeSlider" ExampleName="RangeSliderExample1" Title="Usage" Description="MudRangeSlider containing Lower Value and Upper Value">
66
<RangeSliderExample1 />
77
</ExampleCard>
8+
9+
<ExampleCard ComponentName="RangeSlider" ExampleName="RangeSliderExample2" Title="Custom Slideable Values" Description="You can set slideable area without changing Min and Max. Just set SlideableMin and SlideableMax.">
10+
<RangeSliderExample2 />
11+
</ExampleCard>
812
</ExamplePage>

‎CodeBeam.MudBlazor.Extensions/Components/RangeSlider/MudRangeSlider.razor‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,16 @@
3131

3232
@if (Range)
3333
{
34-
<input class="mud-slider-input" aria-valuenow="@UpperValue" aria-valuemin="@_min" aria-valuemax="@_max" role="slider" @attributes="UserAttributes" type="range" min="@_min" max="@_max" step="@_step" disabled="@(Disabled || _userInvalidatedRange || (Range && DisableMax))"
35-
@bind-value="@UpperText" @bind-value:event="@((Immediate ? "oninput" : "onchange"))" />
34+
<input class="mud-slider-input" aria-valuenow="@_upperValue.Value" aria-valuemin="@(Converter.Set(Min))" aria-valuemax="@@(Converter.Set(Max))" role="slider" @attributes="UserAttributes" type="range" min="@(Converter.Set(Min))" max="@(Converter.Set(Max))" step="@(Converter.Set(Step))" disabled="@(Disabled || (Range && DisableMax))"
35+
@bind-value:get="@GetUpperValueText" @bind-value:set="@SetUpperValueTextAsync" @bind-value:event="@((Immediate ? "oninput" : "onchange"))" />
3636

37-
@SliderValueLabel(upperLeft, string.IsNullOrEmpty(UpperLabelText) ? UpperValue?.ToString() : UpperLabelText)
37+
@SliderValueLabel(upperLeft, string.IsNullOrEmpty(UpperLabelText) ? _upperValue.Value.ToString() : UpperLabelText)
3838
}
3939

40-
<input class="mud-slider-input" aria-valuenow="@Value" aria-valuemin="@_min" aria-valuemax="@_max" role="slider" @attributes="UserAttributes" type="range" min="@_min" max="@_max" step="@_step" disabled="@(Disabled || _userInvalidatedRange || (Range && DisableMin))"
41-
@bind-value="@Text" @bind-value:event="@((Immediate ? "oninput" : "onchange"))" />
42-
43-
@SliderValueLabel(left, string.IsNullOrEmpty(LabelText) ? Value?.ToString() : LabelText)
40+
<input class="mud-slider-input" aria-valuenow="@_value.Value" aria-valuemin="@(Converter.Set(Min))" aria-valuemax="@(Converter.Set(Max))" role="slider" @attributes="UserAttributes" type="range" min="@(Converter.Set(Min))" max="@(Converter.Set(Max))" step="@(Converter.Set(Step))" disabled="@(Disabled || (Range && DisableMin))"
41+
@bind-value:get="@GetValueText" @bind-value:set="@SetValueTextAsync" @bind-value:event="@((Immediate ? "oninput" : "onchange"))" />
4442

43+
@SliderValueLabel(left, string.IsNullOrEmpty(LabelText) ? _value.Value.ToString() : LabelText)
4544

4645
</div>
4746

@@ -51,11 +50,11 @@
5150
}
5251
</div>
5352

54-
@if (_userInvalidatedRange)
53+
@* @if (_userInvalidatedRange)
5554
{
5655
_userInvalidatedRange = false;
5756
StateHasChanged();
58-
}
57+
} *@
5958

6059
@code
6160
{

0 commit comments

Comments
 (0)