You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.5 KiB
51 lines
1.5 KiB
2 years ago
|
@namespace Connected.Components
|
||
|
|
@using System.Globalization
|
||
|
|
@inherits UIComponent
|
||
|
|
@typeparam T
|
||
|
|
|
||
|
|
@{
|
||
|
|
var width = CalculatePosition().ToString(CultureInfo.InvariantCulture);
|
||
|
|
}
|
||
|
|
|
||
|
|
<div class="@Classname" style="@Style">
|
||
|
|
@if (ChildContent != null)
|
||
|
|
{
|
||
|
|
<MudText Typo="Typo.body1">@ChildContent</MudText>
|
||
|
|
}
|
||
|
|
<div class="mud-slider-container">
|
||
|
|
@if (Variant == Variant.Filled)
|
||
|
|
{
|
||
|
|
<div class="mud-slider-inner-container">
|
||
|
|
<div class="mud-slider-filled" style="@($"width:{width}%;")"></div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
@if (TickMarks == true)
|
||
|
|
{
|
||
|
|
<div class="mud-slider-inner-container">
|
||
|
|
<div class="mud-slider-tickmarks">
|
||
|
|
@for (int i = 0; i < _tickMarkCount; i++)
|
||
|
|
{
|
||
|
|
int current = i;
|
||
|
|
|
||
|
|
<div class="d-flex flex-column relative">
|
||
|
|
<span class="mud-slider-track-tick" />
|
||
|
|
@if (TickMarkLabels != null && current < TickMarkLabels.Length)
|
||
|
|
{
|
||
|
|
<MudText Class="mud-slider-track-tick-label" Typo="Typo.body2">@TickMarkLabels[current]</MudText>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
<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"
|
||
|
|
@bind-value="@Text" @bind-value:event="@((Immediate == true ? "oninput" : "onchange"))" />
|
||
|
|
@if (ValueLabel)
|
||
|
|
{
|
||
|
|
<div class="mud-slider-value-label" style="@($"left:{width}%;")">
|
||
|
|
@Value.ToString()
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|