import { RangeBaseElement } from '../Abstracts/RangeBaseElement'; import { ISlider2ThumbElementProps } from './ISlider2ThumbElementProps'; declare const Slider2ThumbElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Valueable").IValueableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Focusable").IFocusableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & typeof RangeBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Slider2Thumb - A draggable thumb handle component for use within Slider2 range sliders. * * @description * The Slider2Thumb component represents an individual draggable handle within a Slider2 range * slider, enabling precise value selection through mouse, touch, and keyboard interaction. Each * thumb maintains its own value and state while coordinating with the parent Slider2 container * for constraints, styling, and behavior. Features include focus ring indicators for accessibility, * smooth dragging interactions, keyboard navigation support, and automatic constraint handling * to prevent overlap with other thumbs. Designed to be used exclusively within mosaik-slider2 * elements via the thumb slot. * * @name Slider2Thumb * @element mosaik-slider2-thumb * @category Ranges * * @csspart focusRing - Focus indicator ring for keyboard navigation accessibility * @csspart input - Native HTML range input element providing slider functionality * * @cssprop {String} --slider2thumb-font-family - The font family CSS custom property. * @cssprop {String} --slider2thumb-font-letter-spacing - The font letter spacing CSS custom property. * @cssprop {String} --slider2thumb-font-line-height - The font line height CSS custom property. * @cssprop {String} --slider2thumb-font-size - The font size CSS custom property. * @cssprop {String} --slider2thumb-font-text-decoration - The font text decoration CSS custom property. * @cssprop {String} --slider2thumb-font-text-transform - The font text transform CSS custom property. * @cssprop {String} --slider2thumb-font-weight - The font weight CSS custom property. * @cssprop {String} --slider2thumb-gap - The gap CSS custom property. * @cssprop {String} --slider2thumb-padding-bottom - The padding bottom CSS custom property. * @cssprop {String} --slider2thumb-padding-left - The padding left CSS custom property. * @cssprop {String} --slider2thumb-padding-right - The padding right CSS custom property. * @cssprop {String} --slider2thumb-padding-top - The padding top CSS custom property. * @cssprop {String} --slider2thumb-shadow - The shadow CSS custom property. * @cssprop {String} --slider2thumb-shadow-blur - The shadow blur CSS custom property. * @cssprop {String} --slider2thumb-shadow-color - The shadow color CSS custom property. * @cssprop {String} --slider2thumb-shadow-offset-x - The shadow offset x CSS custom property. * @cssprop {String} --slider2thumb-shadow-offset-y - The shadow offset y CSS custom property. * @cssprop {String} --slider2thumb-shadow-spread - The shadow spread CSS custom property. * @cssprop {String} --slider2thumb-size - The size CSS custom property. * @cssprop {String} --slider2thumb-transition-duration - The transition duration CSS custom property. * @cssprop {String} --slider2thumb-transition-mode - The transition mode CSS custom property. * @cssprop {String} --slider2thumb-transition-property - The transition property CSS custom property. * @cssprop {String} --slider2thumb-translate - The translate CSS custom property. * * @fires rangeValueChanged {RangeValueChangedEvent} - Fired when the thumb value changes * * @dependency mosaik-focus-ring - The Focus Ring element. * * @example * Basic thumb within Slider2 (min/max range): * ```html * * * * * ``` * * @example * Thumbs with custom step and variant: * ```html * * * * * * * ``` * * @example * Disabled thumb within range slider: * ```html * * * * * * * ``` * * @example * Multi-thumb configuration with three points: * ```html * * * * * * ``` * * @public */ export declare class Slider2ThumbElement extends Slider2ThumbElement_base implements ISlider2ThumbElementProps { private _step; /** * @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 `step` property. * * @public * @attr */ get step(): number; set step(value: number); } /** * @public */ export declare namespace Slider2ThumbElement { type Props = ISlider2ThumbElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-slider2-thumb': Slider2ThumbElement; } } export {}; //# sourceMappingURL=Slider2ThumbElement.d.ts.map