generated:catalog.entry.slider.title
generated:catalog.entry.slider.description
@xngui/components/slider@xngui/components/sliderchrome:demo.section
chrome:demo.preview
import { Component } from '@angular/core';
import { XForm } from '@xngui/components/form';
import { XSlider } from '@xngui/components/slider';
@Component({
selector: 'app-example',
imports: [XForm, XSlider],
templateUrl: './slider.component.html',
})
export class ExampleComponent {}
chrome:demo.events.title
chrome:demo.events.empty
chrome:demo.api.title
x-slider
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
modeXSliderMode'single'Single-thumb or dual-thumb range selection.
sizeXSize—Visual size tier — falls back to XConfigService when unset.
densityXDensity—Spacing offsets — orthogonal to `size`; falls back to XConfigService when unset.
minnumber—Minimum bound — defaults to `0` when unset.
maxnumber—Maximum bound — defaults to `100` when unset.
stepnumber1Step increment for pointer and keyboard adjustments.
disabledbooleanfalsePrevents interaction and sets `aria-disabled` on the thumbs.
readonlybooleanfalseValue-only input — user cannot change when true.
invalidbooleanfalseMarks the control invalid for styling and ARIA.
showValuebooleantrueShow the current value beside the track.
namestring''Native form control `name` attribute.
controlIdstring—Native `id` on the control; falls back to `name`, then a generated id.
ariaLabelstring—Accessible name for single mode or the shared fallback for range thumbs.
ariaLabelStartstring—Accessible name for the range start thumb.
ariaLabelEndstring—Accessible name for the range end thumb.