Blazor Slider & Range Slider 구성 요소는 트랙을 따라 엄지를 움직여 주어진 범위에서 선택할 수 있게 해줍니다. 트랙은 연속 또는 단계적으로 정의할 수 있으며 단일 및 범위 슬라이더 중에서 선택할 수 있습니다.
Blazor Slider & Range Slider Example
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbSliderModule),
typeof(IgbRangeSliderModule)
);
await builder.Build().RunAsync();
}
}
}cs
Slider 구성 요소와 Range Slider 구성 요소의 주요 차이점은 Slider 구성 요소에는 엄지 손가락이 하나 있고 Range Slider 구성 요소에는 엄지 손가락이 두 개 있다는 것입니다. Slider 구성 요소의 단일 썸은 해당 Value 속성을 표시합니다. Range Slider 구성 요소의 두 엄지손가락에는 Lower 및 Upper 속성이 표시됩니다.
값 중 하나가 변경되면 두 슬라이더 모두 두 개의 이벤트를 발생시킵니다. IgbInput 이벤트는 키보드 또는 드래그 상호 작용을 사용하여 값이 변경될 때마다 발생하며, igcChange 이벤트는 드래그 끝 또는 키보드 상호 작용에서 값 변경이 커밋될 때 발생합니다.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbSliderModule),
typeof(IgbRangeSliderModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Constraints
슬라이더의 트랙에는 Min 및 Max 속성을 사용하여 구성되는 최소값과 최대값이 있습니다. 또한 LowerBound 및 UpperBound 속성을 사용하여 썸 드래그를 제한할 수 있습니다.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Step
Step 속성은 값이 준수해야 하는 슬라이더의 세분성을 지정합니다. 기본적으로 슬라이더 트랙은 연속적으로 보입니다. 슬라이더의 DiscreteTrack 속성을 true로 설정하면 트랙에 단계가 표시됩니다.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Step 속성이 0으로 설정되면 스테핑이 암시되지 않으며 슬라이더 범위의 모든 값이 허용됩니다. 이 경우 DiscreteTrack true로 설정되어 있어도 슬라이더는 연속적으로 보입니다.
Tick Marks
슬라이더 구성 요소에는 눈금 표시와 레이블이 표시될 수 있습니다. 슬라이더 구성 요소는 기본 및 보조라는 두 가지 유형의 눈금 표시를 지원합니다. 기본 눈금 표시를 표시하려면 PrimaryTicks 속성을 1 보다 큰 값으로 설정해야 합니다. 기본 틱 수는 트랙에 고르게 분포됩니다. 보조 눈금 표시를 표시하려면 SecondaryTicks 속성을 0 보다 큰 값으로 설정해야 합니다. SecondaryTicks 값은 두 개의 기본 틱 사이의 보조 틱 수를 지정합니다.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
또한 TickOrientation 속성을 사용하여 눈금 표시의 방향을 구성할 수 있습니다. 기본적으로 TickOrientation 값은 슬라이더 트랙 아래에 눈금을 표시하는 end 입니다. 트랙 위에 표시되는 start과 트랙 위와 아래의 틱을 미러링하는 mirror 설정할 수 있습니다.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule));
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbSliderModule),
typeof(IgbNumberFormatSpecifierModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<style>
igc-slider {
padding: 30px50px;
}
</style><divclass="container sample center"><IgbSlider @ref="SliderRef"PrimaryTicks="3"SecondaryTicks="4"></IgbSlider><IgbSlider @ref="SliderRef2"ValueFormat="Storage: {0} GB"></IgbSlider></div>@code {public IgbNumberFormatSpecifier formatSpecifier;
public IgbNumberFormatSpecifier formatSpecifier2;
private IgbSlider _slider;
public IgbSlider SliderRef
{
get
{
return _slider;
}
set
{
_slider = value;
formatSpecifier = new IgbNumberFormatSpecifier();
formatSpecifier.Style = "currency";
formatSpecifier.Currency = "USD";
_slider.ValueFormatOptions = formatSpecifier;
StateHasChanged();
}
}
private IgbSlider _slider2;
public IgbSlider SliderRef2
{
get
{
return _slider2;
}
set
{
_slider2 = value;
formatSpecifier2 = new IgbNumberFormatSpecifier();
formatSpecifier2.MinimumFractionDigits = 1;
_slider2.ValueFormatOptions = formatSpecifier2;
StateHasChanged();
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Labels
어떤 경우에는 슬라이더 값을 문자열 값으로 형식화하려는 경우가 있습니다. 즉, [0, 1, 2] 값을 ['Low', 'Medium', 'High']에 매핑합니다. 이 시나리오에서는 슬라이더를 사용하여 내부에 IgbSliderLabel 요소를 정의할 수 있습니다. 슬라이더 레이블의 텍스트 내용은 썸 및 눈금 레이블에 사용됩니다. 슬라이더 레이블이 제공되면 제공된 레이블에 매핑되지 않는 값을 허용하지 않도록 Min, Max 및 Step 속성이 자동으로 계산됩니다. 'Low', 'Medium', 'High' 라벨의 경우 Min은 0, Max는 2, Step은 1로 설정됩니다.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbSliderModule),
typeof(IgbSliderLabelModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Styling
슬라이더 구성 요소는 내부 요소에 대한 CSS 부분을 노출합니다. 다음 표에는 모든 CSS 부분이 나열되어 있습니다.
이름
설명
베이스
슬라이더의 기본 래퍼입니다.
진드기
진드기 컨테이너입니다.
진드기 그룹
진드기 그룹 컨테이너입니다.
진드기
눈금 요소입니다.
눈금 라벨
눈금 레이블 요소입니다.
눈금 라벨 내부
눈금 레이블의 내부 요소입니다.
엄지손가락
엄지손가락 컨테이너입니다.
무지
엄지손가락 요소입니다.
엄지손가락 라벨
엄지손가락 도구 설명의 레이블 컨테이너입니다.
엄지 라벨 내부
엄지손가락 도구 설명의 레이블 요소입니다.
길
트랙 컨테이너.
단계
트랙 단계 요소입니다.
비활성
트랙의 비활성 요소입니다.
채우다
트랙의 채워진 부분.
다음 샘플은 트랙 채우기 및 썸 부분의 스타일을 지정하는 방법을 보여줍니다.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbSliderModule),
typeof(IgbRangeSliderModule)
);
await builder.Build().RunAsync();
}
}
}cs