import { MultiRangeBaseElement } from '../Abstracts/MultiRangeBaseElement'; import { ISlider2ElementProps } from './ISlider2ElementProps'; declare const Slider2Element_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & import("../../../Behaviors/Slottable").ISlottable) & typeof MultiRangeBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Slider2 - An advanced multi-thumb range slider for selecting value ranges or multiple points. * * @description * The Slider2 component provides sophisticated range selection capabilities with support for * multiple draggable thumb handles, making it ideal for min/max range filters, multi-point * selection, and advanced value control scenarios. Features customizable track appearance, * optional value indicators, configurable gaps between thumbs to prevent overlap, and flexible * orientation support. Built with a slot-based architecture allowing custom thumb configurations * and comprehensive theming. Essential for price ranges, time ranges, and any interface requiring * selection of value spans or multiple discrete points. * * @name Slider2 * @element mosaik-slider2 * @category Ranges * * @slot thumb - Slot for one or more Slider2Thumb elements representing draggable handles * * @csspart container - Main container element for track and thumbs * @csspart labelEnd - Label displaying the maximum value (when showValueIndicator is true) * @csspart labelStart - Label displaying the minimum value (when showValueIndicator is true) * @csspart progressArea - Filled progress area between thumb positions * @csspart root - Root container for the slider component * @csspart thumb - Individual thumb element part (default thumb if no slot content provided) * @csspart trackArea - Background track area for the slider * * @cssprop {String} --slider2-font-family - The font family CSS custom property. * @cssprop {String} --slider2-font-letter-spacing - The font letter spacing CSS custom property. * @cssprop {String} --slider2-font-line-height - The font line height CSS custom property. * @cssprop {String} --slider2-font-size - The font size CSS custom property. * @cssprop {String} --slider2-font-text-decoration - The font text decoration CSS custom property. * @cssprop {String} --slider2-font-text-transform - The font text transform CSS custom property. * @cssprop {String} --slider2-font-weight - The font weight CSS custom property. * @cssprop {String} --slider2-gap - The gap CSS custom property. * @cssprop {String} --slider2-padding-bottom - The padding bottom CSS custom property. * @cssprop {String} --slider2-padding-left - The padding left CSS custom property. * @cssprop {String} --slider2-padding-right - The padding right CSS custom property. * @cssprop {String} --slider2-padding-top - The padding top CSS custom property. * @cssprop {String} --slider2-shadow - The shadow CSS custom property. * @cssprop {String} --slider2-shadow-blur - The shadow blur CSS custom property. * @cssprop {String} --slider2-shadow-color - The shadow color CSS custom property. * @cssprop {String} --slider2-shadow-offset-x - The shadow offset x CSS custom property. * @cssprop {String} --slider2-shadow-offset-y - The shadow offset y CSS custom property. * @cssprop {String} --slider2-shadow-spread - The shadow spread CSS custom property. * @cssprop {String} --slider2-transition-duration - The transition duration CSS custom property. * @cssprop {String} --slider2-transition-mode - The transition mode CSS custom property. * @cssprop {String} --slider2-transition-property - The transition property CSS custom property. * @cssprop {String} --slider2-translate - The translate CSS custom property. * * @fires rangeValueChanged {RangeValueChangedEvent} - Fired when any thumb value changes * * @dependency mosaik-slider2-thumb - The Slider2 Thumb element. * * @example * Basic range slider with min/max selection: * ```html * * * * * ``` * * @example * Price range filter: * ```html *
* * * * * *
$200 - $800
*
* ``` * * @example * Time range selector: * ```html * * * * * ``` * * @example * Vertical range slider: * ```html * * * * * ``` * * @example * Multi-point selector with three thumbs: * ```html * * * * * * ``` * * @public */ export declare class Slider2Element extends Slider2Element_base implements ISlider2ElementProps { private _thickness; private _step; private _gap; private _showValueIndicator; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `thickness` property. * * @public * @attr */ get thickness(): number; set thickness(value: number); /** * Gets or sets the `step` property. * * @public * @attr */ get step(): number; set step(value: number); /** * Gets or sets the `gap` property. * * @public * @attr */ get gap(): number; set gap(value: number); /** * Gets or sets the `showValueIndicator` property. * * @public * @attr */ get showValueIndicator(): boolean; set showValueIndicator(value: boolean); onApplyTemplate(): void; } /** * @public */ export declare namespace Slider2Element { type Props = ISlider2ElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-slider2': Slider2Element; } } export {}; //# sourceMappingURL=Slider2Element.d.ts.map