Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Slider

Select within a fixed interval by dragging the slider

Change the current value as you drag the slider

Demo

Select within a fixed interval by dragging the slider

Demo

Attributes

Loading...

Event

Loading...
@page "/sliders"
@inject IStringLocalizer<Sliders> Localizer

<h3>Slider</h3>

<h4>Select within a fixed interval by dragging the slider</h4>

<DemoBlock Title="Basic usage" Introduction="Change the current value as you drag the slider"  Name="Normal">
    <Slider></Slider>
    <Slider Value="50" Label="Customize the initial value"></Slider>
    <Slider Value="42" IsDisabled="true" Label="Disable"></Slider>
</DemoBlock>

<DemoBlock Title="Slider bidirectional binding" Introduction="Select within a fixed interval by dragging the slider" Name="Binding">
    <div class="row g-3">
        <div class="col-12 col-sm-8">
            <Slider @bind-Value="@BindValue" Label="Customize the initial value"></Slider>
        </div>
        <div class="col-12 col-sm-4">
            <BootstrapInput @bind-Value="@BindValue" readonly></BootstrapInput>
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Sliders
{
    private int BindValue { get; set; } = 50;

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Class",
                Description = Localizer["Class"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = Localizer["IsDisabled"],
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Value",
                Description = Localizer["Value"],
                Type = "int",
                ValueList = "—",
                DefaultValue = "—"
            },
    };

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
            new EventItem()
            {
                Name = "ValueChanged",
                Description = Localizer["ValueChanged"],
                Type ="EventCallback<int>"
            }
    };
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload