Slider and Range Slider

The slider allows users to select one or two numeric values from a given range, which is by default from 0 to 100.

Slider

Slider, allows users to select one numeric value.
Slider/Index.cshtml
@(Html.Awe().Slider(new SliderOpt { Name = "slider1", Value = 50 }))

Range Slider

User can select 2 numeric values. ValueLabel Auto will make show a tooltip popup with the value corresponding to the slider thumb, when hovering or dragging that thumb element.
Slider/Index.cshtml
@(Html.Awe().Slider(new SliderOpt
{
    Name = "sliderRange1",
    Range = true,
    Value = new[] { 30, 70 },
    ValueLabel = ValueLabel.Auto
}))

Custom range, Min Max defined

Setting min and max values for the slider, ValueLabel set to always, so we will always have the tooltip next to the slider thumb showing its current value.
Slider/Index.cshtml
@(Html.Awe().Slider(new SliderOpt
{
    Name = "sliderRangeMinMax1",
    Value = new[] { 500, 700 },
    Min = 200,
    Max = 1500,
    Range = true,
    ValueLabel = ValueLabel.Always
}))

Vertical range sliders

Range slider with vertical orientation.
Setting a custom css class to change the color of the second slider.
Step is set on the the sliders to restrict the values, and it will also restrict the movement of the slider thumb.
Slider/Index.cshtml
<div style="display:flex; gap: 5em;">
@(Html.Awe().Slider(new SliderOpt
{
    Name = "sliderVertical",
    Value = new[] { .3, .7 },
    Range = true,
    Min = 0,
    Max = 1,
    Step = 0.05,
    Vertical = true,
    ValueLabel = ValueLabel.Always
}))

@(Html.Awe().Slider(new SliderOpt
{
    Name = "sliderVertical2",
    Value = new[] { 300, 700 },
    Range = true,
    Min = -300,
    Max = 900,
    Step = 50,
    Vertical = true,
    ValueLabel = ValueLabel.Always,
    CssClass = "greenSlider"
}))
</div>
<style>
    .o-slider-field.greenSlider {
        color: #79a326;
    }
</style>

Range slider bound to numeric inputs

Example showing a range slider bound to 2 numeric inputs.
Slider/Index.cshtml
<div class="efield">
@(Html.Awe().Slider(new SliderOpt
{
    Name = "rangeSliderBound1",
    Value = new[] { 500, 700 },
    Min = 200,
    Max = 1500,
    Range = true,
    ValueLabel = ValueLabel.Always
}))
</div>
<div class="medium-fields">
    @(Html.Awe().NumericInput(new NumericInputOpt { Name = "txtRange1", Step = 10 }))
    @(Html.Awe().NumericInput(new NumericInputOpt { Name = "txtRange2", Step = 10 }))
</div>

<script>
    $(function(){
        const range1 = $('#txtRange1'), range2 = $('#txtRange2');
        const slider = $('#rangeSliderBound1');
        
        const renderInputs = () => {
            const val = awe.val(slider);
            range1.val(val[0]).data('api').render();
            range2.val(val[1]).data('api').render();
        };

        slider.on('input change', renderInputs);

        range1.add(range2).on('input change', function(ev){
            const val = [range1.val(), range2.val()];
            slider.data('api').setVal(val);
            slider.data('api').render();
        });

        renderInputs();
    })
</script>

Right to left direction


Showing Range slider's support for right to left direction.
Slider/Index.cshtml
<div style="direction:rtl; padding: 0 3em;">
@(Html.Awe().Slider(new SliderOpt
{
    Name = "sliderRangeRtl",
    Value = new[] { .3, .7 },
    Min = 0,
    Max = 1,
    Range = true,
    ValueLabel = ValueLabel.Always
}))
<br />
@(Html.Awe().Slider(new SliderOpt
{
    Name = "rangeSliderRtlVert",
    Value = new[] { 500, 700 },
    Min = 200,
    Max = 1500,
    Range = true,
    ValueLabel = ValueLabel.Always,
    Vertical = true
}))

</div>



 Comments