@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
113 lines • 4.53 kB
TypeScript
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
import type { LitElement } from 'lit';
import type { FormAssociated } from '../../utils/form/form-associated';
/**
* Slider orientation. `'horizontal'` lays the track left-to-right;
* `'vertical'` lays it top-to-bottom.
*/
export type ExpressiveSliderDirection = 'horizontal' | 'vertical';
export declare const ExpressiveSliderDirection: {
readonly Horizontal: 'horizontal';
readonly Vertical: 'vertical';
};
/**
* Five-step size scale locked to the Figma prototype (node-id `58008:10353`):
*
* | Size | Track height | Handle height | Rounded end |
* | ------------- | ------------ | ------------- | ----------- |
* | `extra-small` | 16px | 44px | 16px |
* | `small` | 24px | 44px | 8px |
* | `medium` | 40px | 52px | 12px |
* | `large` | 56px | 68px | 16px |
* | `extra-large` | 96px | 108px | 28px |
*/
export type ExpressiveSliderSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
export declare const ExpressiveSliderSize: {
readonly ExtraSmall: 'extra-small';
readonly Small: 'small';
readonly Medium: 'medium';
readonly Large: 'large';
readonly ExtraLarge: 'extra-large';
};
/**
* Behavioral type of the slider.
*
* - `standard` — single handle; active track fills `min → value`.
* - `centered` — handle sits at the geometric center; positive values fill the
* right (or bottom) half with the active color, negative values fill the
* left (or top) half. Maps to one `<input type="range">` whose effective
* `min` is `-max`, `max` is `+max`.
* - `range` — two handles symmetric about the center with a track-dot marker.
*/
export type ExpressiveSliderType = 'standard' | 'centered' | 'range';
export declare const ExpressiveSliderType: {
readonly Standard: 'standard';
readonly Centered: 'centered';
readonly Range: 'range';
};
/**
* `mdc-expressive-slider` — Material Design 3 Expressive slider.
*
* Layout pulled from the Figma prototype (node-id `58008:10353`):
* - Standard: `[active-track] [handle] [inactive-track]`, no gap between
* segments and the handle. Active fills from min up to the handle position.
* - Centered: two inactive halves split at 50%, with an active overlay
* growing from the center toward the value side.
* - Range: two inactive halves with two handles symmetric about the center
* and a center dot at the 50% mark.
*
* Five size presets and two orientations. The host element behaves as a
* single (or pair of) `<input type="range">` for form submission and a11y.
*/
export interface IExpressiveSlider extends LitElement, FormAssociated {
min: number;
max: number;
/** Single-handle value (used when `type='standard'` or `).). */
value?: number;
/** Range-start value (used when `type='range'`). */
valueStart?: number;
/** Range-end value (used when `type='range'`). */
valueEnd?: number;
valueLabel: string;
valueLabelStart: string;
valueLabelEnd: string;
ariaLabelStart: string;
ariaLabelEnd: string;
ariaValueTextStart: string;
ariaValueTextEnd: string;
step: number;
ticks: boolean;
labeled: boolean;
/**
* Backward-compat alias. Setting `range=true` switches `type` to `'range'`;
* reading returns whether `type === 'range'`.
*
* @deprecated Use the `type` attribute instead.
*/
range: boolean;
/** Slider orientation. Reflects to the `direction` attribute. */
direction: ExpressiveSliderDirection;
/**
* Whether the slider's value scale is reversed.
*
* - When `false` (default):
* - `horizontal`: small to large, left-to-right (min at left, max at right).
* - `vertical`: small to large, bottom-to-top (min at bottom, max at top).
* - When `true`:
* - `horizontal`: large to small, left-to-right (max at left, min at right).
* - `vertical`: large to small, bottom-to-top (max at bottom, min at top / min at top, max at bottom).
*
* Reflects to the `reversed` attribute.
*/
reversed: boolean;
/** Size preset. Reflects to the `size` attribute. */
size: ExpressiveSliderSize;
/** Behavioral type. Reflects to the `type` attribute. */
type: ExpressiveSliderType;
name: string;
}
//# sourceMappingURL=expressive-slider.interface.d.ts.map