@zywave/zui-slider 4.3.2 → 4.4.0-pre.0

package/dist/zui-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\nconst DEFAULT_MAX = 100;\n\n/**\n * A range form control for choosing values along a slider.\n * @element zui-slider\n *\n * @attr {string | null} [name=null] - The name of this element that is associated with form submission\n * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n *\n * @prop {string | null} [name=null] - The name of this element that is associated with form submission\n * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value of the element, interpreted as one of the following, in order: A number, NaN if conversion is impossible\n * @prop {string} [value='50'] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line\n *\n * @cssprop [--zui-slider-thumb-size=1.875rem (30px)] - Point of contact to grab and slide to change value\n *\n * @event {CustomEvent} change - Fires when value changes, details contain `value`\n */\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n  protected get _focusControlSelector() {\n    return 'input';\n  }\n\n  protected get _formValue() {\n    return this.value;\n  }\n\n  protected formResetCallback() {\n    this.value = this.#defaultValue;\n  }\n\n  #defaultValue = `${DEFAULT_MAX / 2}`;\n\n  #value = `${DEFAULT_MAX / 2}`;\n\n  @property()\n  get value() {\n    return this.#value;\n  }\n\n  set value(val) {\n    const oldVal = this.#value;\n    val = this._ensureValidValue(val);\n    this.#value = val;\n    this._setFormValue(this.#value);\n    this.requestUpdate('value', oldVal);\n  }\n\n  get valueAsNumber() {\n    return parseFloat(this.#value);\n  }\n\n  /**\n   * Represents the maximum permitted value\n   */\n  @property({ type: Number }) min = 0;\n\n  /**\n   * Represents the maximum permitted value\n   */\n  @property({ type: Number, attribute: 'max' }) max = 100;\n\n  /**\n   * Represents the stepping interval, used both for user interface and validation purposes\n   */\n  @property({ type: Number }) step = 0;\n\n  /**\n   * Represents that this control must be filled in for form submission\n   */\n  @property({ type: Boolean, attribute: 'no-text' }) noText = false;\n\n  get progress() {\n    return ((this.valueAsNumber - this.min) / (this.max - this.min)) * 100;\n  }\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // we want to go a little faster than LitElement and behave more like native HTML Form Associated Elements\n    let value = this.getAttribute('value') ?? this.value;\n    const max = this.getAttribute('max') ?? this.max;\n    const min = this.getAttribute('min') ?? this.min;\n\n    value = this._ensureValidValue(value, min, max);\n\n    this.#defaultValue = value;\n    this._setFormValue(value.toString());\n  }\n\n  render() {\n    const progressColor = this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n    const styles = {\n      background: `linear-gradient(to right, ${progressColor} 0%, ${progressColor} ${this.progress}%, var(--zui-gray-200) ${this.progress}%, var(--zui-gray-200) 100%)`,\n    };\n    return html`<input\n        style=${styleMap(styles)}\n        type=\"range\"\n        .value=\"${this.value}\"\n        .min=\"${this.min}\"\n        .max=\"${this.max}\"\n        .step=\"${this.step}\"\n        ?disabled=\"${this.disabled}\"\n        @input=\"${this._onInput}\"\n        @change=\"${this._onChange}\"\n      />${this._renderText()}`;\n  }\n\n  private _renderText() {\n    if (this.noText) {\n      return html``;\n    }\n    const thumbOffset = `var(--zui-slider-thumb-size) * ${this.progress / 100}`;\n    const styles = {\n      left: `calc(${this.progress}% - ${thumbOffset} + 0.125rem)`,\n    };\n    return html`<span style=${styleMap(styles)}>${this.value}</span>`;\n  }\n\n  private _onInput(e: Event) {\n    this.value = (e.target as HTMLInputElement).value;\n  }\n\n  private _onChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true }));\n  }\n\n  private _ensureValidValue(value: string | number, min?: number | string | null, max?: number | string | null) {\n    if (value === '') {\n      return value;\n    }\n    min = min ?? this.min;\n    max = max ?? this.max;\n\n    if (typeof value === 'string') {\n      value = parseFloat(value);\n    }\n    if (typeof min === 'string') {\n      min = parseFloat(min);\n    }\n    if (typeof max === 'string') {\n      max = parseFloat(max);\n    }\n\n    if (value < min) {\n      value = min;\n    } else if (value > max) {\n      value = max;\n    }\n\n    return value.toString();\n  }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-slider': ZuiSlider;\n  }\n}\n"]}
+{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html, nothing, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\ntype ThumbFlag = 'thumb' | 'startThumb' | 'endThumb';\n\n/**\n * A range form control for choosing values along a slider.\n * @element zui-slider\n *\n * @attr {string | null} [name=null] - The name of this element that is associated with form submission\n * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @attr {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @attr {number} [value-start=0] - Represents the start (lower) value in range mode\n * @attr {number} [value-end=100] - Represents the end (upper) value in range mode\n * @attr {number} [min=0] - Represents the minimum permitted value\n * @attr {number} [max=100] - Represents the maximum permitted value\n * @attr {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @attr {boolean} [show-min-max=false] - Shows the min and max values beneath the slider\n *\n * @prop {string | null} [name=null] - The name of this element that is associated with form submission\n * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value as a number. Invalid or non-numeric values are clamped to min; empty string (representing an in-progress edit) returns NaN\n * @prop {string} [value='50'] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line (single mode)\n * @prop {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @prop {string} [valueStart='0'] - Represents the start (lower) value in range mode\n * @prop {string} [valueEnd='100'] - Represents the end (upper) value in range mode\n * @prop {number} [progressStart=0] - Determines visual placement of the start thumb in range mode\n * @prop {number} [progressEnd=100] - Determines visual placement of the end thumb in range mode\n * @prop {number} [min=0] - Represents the minimum permitted value\n * @prop {number} [max=100] - Represents the maximum permitted value\n * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider\n *\n * @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)\n * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb\n *\n * @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }\n */\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n  #defaultValue: string = '50';\n  #defaultValueStart: string = '0';\n  #defaultValueEnd: string = '100';\n\n  #value: string = '50';\n  #valueStart: string = '0';\n  #valueEnd: string = '100';\n\n  #thumbInputState = new Map<\n    ThumbFlag,\n    {\n      visible: boolean;\n      focused: boolean;\n      timer?: ReturnType<typeof setTimeout>;\n      debounceTimer?: ReturnType<typeof setTimeout>;\n    }\n  >([\n    ['thumb', { visible: false, focused: false }],\n    ['startThumb', { visible: false, focused: false }],\n    ['endThumb', { visible: false, focused: false }],\n  ]);\n\n  // Pre-bound floating input handlers cached to avoid new function references on every render\n  #onThumbFloatingInput = this.#onFloatingInput('thumb', (v) => (this.value = v));\n  #onStartThumbFloatingInput = this.#onFloatingInput('startThumb', (v) => (this.valueStart = v));\n  #onEndThumbFloatingInput = this.#onFloatingInput('endThumb', (v) => (this.valueEnd = v));\n\n  // Cached floating input change handlers — flush debounce and dispatch immediately on commit (Enter/blur)\n  #onThumbFloatingChange = this.#makeFloatingChange(\n    'thumb',\n    (v) => (this.value = v),\n    () => this.#onChange()\n  );\n  #onStartThumbFloatingChange = this.#makeFloatingChange(\n    'startThumb',\n    (v) => (this.valueStart = v),\n    () => this.#onRangeChange()\n  );\n  #onEndThumbFloatingChange = this.#makeFloatingChange(\n    'endThumb',\n    (v) => (this.valueEnd = v),\n    () => this.#onRangeChange()\n  );\n\n  // Cached range drag input handlers\n  #onRangeStartInput = this.#onRangeInput('start');\n  #onRangeEndInput = this.#onRangeInput('end');\n\n  // Cached pointer/focus handlers per thumb — prevents new closures on every render\n  #h: Record<ThumbFlag, { show: () => void; hide: () => void; focus: () => void; blur: () => void }> = {\n    thumb: {\n      show: () => this.#showThumbInput('thumb'),\n      hide: () => this.#scheduleHideThumbInput('thumb'),\n      focus: () => this.#focusFloatingInput('thumb'),\n      blur: () => this.#blurFloatingInput('thumb'),\n    },\n    startThumb: {\n      show: () => this.#showThumbInput('startThumb'),\n      hide: () => this.#scheduleHideThumbInput('startThumb'),\n      focus: () => this.#focusFloatingInput('startThumb'),\n      blur: () => this.#blurFloatingInput('startThumb'),\n    },\n    endThumb: {\n      show: () => this.#showThumbInput('endThumb'),\n      hide: () => this.#scheduleHideThumbInput('endThumb'),\n      focus: () => this.#focusFloatingInput('endThumb'),\n      blur: () => this.#blurFloatingInput('endThumb'),\n    },\n  };\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateComplete.then(() => {\n      if (this.range) {\n        const [startInput, endInput] = this.#rangeInputs();\n        this.#valueStart = startInput.value;\n        this.#valueEnd = endInput.value;\n        this.#defaultValueStart = startInput.value;\n        this.#defaultValueEnd = endInput.value;\n        this._setFormValue(`${startInput.value},${endInput.value}`);\n      } else {\n        const input = this.#singleInput();\n        this.#value = input.value;\n        this.#defaultValue = input.value;\n        this._setFormValue(input.value);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#clearAllThumbInputState();\n    // Schedule a re-render so the cleared visibility state is reflected in the DOM.\n    // Lit defers this render until the element reconnects if it is currently disconnected.\n    this.requestUpdate();\n  }\n\n  protected updated(changed: Map<PropertyKey, unknown>) {\n    if (changed.has('disabled') && this.disabled) {\n      this.#clearAllThumbInputState();\n    }\n    if (changed.has('min') || changed.has('max')) {\n      // The native inputs have already clamped (and step-snapped) their values to the new bounds.\n      // Read them back and sync internal state + form value. If the value changed, request a\n      // re-render so the floating input (which binds to #value/#valueStart/#valueEnd) stays in sync.\n      if (this.range) {\n        const [startInput, endInput] = this.#rangeInputs();\n        const newStart = startInput.value;\n        const newEnd = endInput.value;\n        if (newStart !== this.#valueStart || newEnd !== this.#valueEnd) {\n          this.#valueStart = newStart;\n          this.#valueEnd = newEnd;\n          this.requestUpdate();\n        }\n        this._setFormValue(`${this.#valueStart},${this.#valueEnd}`);\n      } else {\n        const newValue = this.#singleInput().value;\n        if (newValue !== this.#value) {\n          this.#value = newValue;\n          this.requestUpdate();\n        }\n        this._setFormValue(this.#value);\n      }\n    }\n  }\n\n  #singleInput(): HTMLInputElement {\n    return this.shadowRoot!.querySelector<HTMLInputElement>('input[type=\"range\"]')!;\n  }\n\n  #rangeInputs(): [HTMLInputElement, HTMLInputElement] {\n    const inputs = this.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type=\"range\"]');\n    return [inputs[0], inputs[1]];\n  }\n\n  protected get _focusControlSelector() {\n    return 'input';\n  }\n\n  protected get _formValue() {\n    return this.range ? `${this.#valueStart},${this.#valueEnd}` : this.#value;\n  }\n\n  protected formResetCallback() {\n    this.#clearAllThumbInputState();\n    // Always request a re-render so the cleared thumb visibility is reflected even when the\n    // reset value equals the current value (the named setter requestUpdate would be a no-op).\n    this.requestUpdate();\n    if (this.range) {\n      this.valueStart = this.#defaultValueStart;\n      this.valueEnd = this.#defaultValueEnd;\n    } else {\n      this.value = this.#defaultValue;\n    }\n  }\n\n  #clearAllThumbInputState() {\n    for (const entry of this.#thumbInputState.values()) {\n      clearTimeout(entry.timer);\n      clearTimeout(entry.debounceTimer);\n      entry.timer = undefined;\n      entry.debounceTimer = undefined;\n      entry.visible = false;\n      entry.focused = false;\n    }\n  }\n\n  /**\n   * Clamps a raw string value to the current [min, max] range.\n   * Empty string is passed through unchanged (represents an in-progress floating input edit).\n   * Non-numeric strings are passed through unchanged.\n   */\n  #clampToRange(rawVal: string): string {\n    if (rawVal === '') {\n      return rawVal;\n    }\n    const num = parseFloat(rawVal);\n    if (isNaN(num)) {\n      return rawVal;\n    }\n    return String(Math.min(this.max, Math.max(this.min, num)));\n  }\n\n  @property()\n  get value() {\n    return this.#value;\n  }\n\n  set value(rawVal: string) {\n    rawVal = this.#clampToRange(rawVal);\n    const oldVal = this.#value;\n    this.#value = rawVal;\n    this._setFormValue(rawVal);\n    this.requestUpdate('value', oldVal);\n  }\n\n  get valueAsNumber() {\n    return parseFloat(this.#value);\n  }\n\n  /**\n   * Enables range mode with two thumbs for selecting a value range\n   */\n  @property({ type: Boolean }) range = false;\n\n  @property({ attribute: 'value-start' })\n  get valueStart() {\n    return this.#valueStart;\n  }\n\n  set valueStart(rawVal: string) {\n    rawVal = this.#clampToRange(rawVal);\n    const oldVal = this.#valueStart;\n    this.#valueStart = rawVal;\n    this._setFormValue(`${rawVal},${this.#valueEnd}`);\n    this.requestUpdate('valueStart', oldVal);\n  }\n\n  @property({ attribute: 'value-end' })\n  get valueEnd() {\n    return this.#valueEnd;\n  }\n\n  set valueEnd(rawVal: string) {\n    rawVal = this.#clampToRange(rawVal);\n    const oldVal = this.#valueEnd;\n    this.#valueEnd = rawVal;\n    this._setFormValue(`${this.#valueStart},${rawVal}`);\n    this.requestUpdate('valueEnd', oldVal);\n  }\n\n  /**\n   * Represents the minimum permitted value\n   */\n  @property({ type: Number }) min = 0;\n\n  /**\n   * Represents the maximum permitted value\n   */\n  @property({ type: Number }) max = 100;\n\n  /**\n   * Represents the stepping interval, used both for user interface and validation purposes\n   */\n  @property({ type: Number }) step = 0;\n\n  /**\n   * Shows the min and max values beneath the slider\n   */\n  @property({ type: Boolean, attribute: 'show-min-max' }) showMinMax = false;\n\n  get #range() {\n    return this.max - this.min;\n  }\n\n  get #progressColor() {\n    return this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n  }\n\n  #isVisible(flag: ThumbFlag): boolean {\n    return this.#thumbInputState.get(flag)!.visible && !this.disabled;\n  }\n\n  get progress() {\n    return this.#computeProgress(this.#value);\n  }\n\n  get progressStart() {\n    return this.#computeProgress(this.#valueStart);\n  }\n\n  get progressEnd() {\n    return this.#computeProgress(this.#valueEnd);\n  }\n\n  #computeProgress(rawValue: string): number {\n    if (this.#range === 0) {\n      return 0;\n    }\n    const num = parseFloat(rawValue);\n    return isNaN(num) ? 0 : parseFloat((((num - this.min) / this.#range) * 100).toFixed(4));\n  }\n\n  #singleTrackBackground(progress: number): string {\n    const c = this.#progressColor;\n    const stop = ZuiSlider.#thumbPositionCSS(progress);\n    return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), ${c} var(--zui-slider-thumb-size), ${c} ${stop}, var(--zui-gray-200) ${stop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n  }\n\n  #rangeTrackBackground(progressStart: number, progressEnd: number): string {\n    const c = this.#progressColor;\n    const startStop = ZuiSlider.#thumbPositionCSS(progressStart);\n    const endStop = ZuiSlider.#thumbPositionCSS(progressEnd);\n    return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-gray-200) var(--zui-slider-thumb-size), var(--zui-gray-200) ${startStop}, ${c} ${startStop}, ${c} ${endStop}, var(--zui-gray-200) ${endStop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n  }\n\n  render() {\n    return html`${this.range ? this.#renderRange() : this.#renderSingle()}${this.#renderMinMaxLabels()}`;\n  }\n\n  #renderSingle() {\n    const progress = this.progress;\n    return html`\n      <div class=\"single-wrapper\">\n        <input\n          aria-label=\"Slider value\"\n          style=${styleMap({ background: this.#singleTrackBackground(progress) })}\n          type=\"range\"\n          .min=\"${String(this.min)}\"\n          .max=\"${String(this.max)}\"\n          .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n          .value=\"${this.#value}\"\n          ?disabled=\"${this.disabled}\"\n          @input=\"${this.#onInput}\"\n          @change=\"${this.#onChange}\"\n          @pointerenter=\"${this.#h.thumb.show}\"\n          @pointerleave=\"${this.#h.thumb.hide}\"\n          @focus=\"${this.#h.thumb.show}\"\n          @blur=\"${this.#h.thumb.hide}\"\n        />\n        ${this.#renderStepDots()}\n        ${this.#renderFloatingInput(\n          this.#value,\n          this.#onThumbFloatingInput,\n          this.#onThumbFloatingChange,\n          'thumb',\n          this.#isVisible('thumb'),\n          progress\n        )}\n      </div>\n    `;\n  }\n\n  #renderRange() {\n    const progressStart = this.progressStart;\n    const progressEnd = this.progressEnd;\n    return html`\n      <div\n        class=\"range-wrapper\"\n        style=${styleMap({ background: this.#rangeTrackBackground(progressStart, progressEnd) })}\n      >\n        ${this.#renderStepDots()}${this.#renderRangeInput('start')}\n        ${this.#renderFloatingInput(\n          this.#valueStart,\n          this.#onStartThumbFloatingInput,\n          this.#onStartThumbFloatingChange,\n          'startThumb',\n          this.#isVisible('startThumb'),\n          progressStart\n        )}\n        ${this.#renderRangeInput('end')}\n        ${this.#renderFloatingInput(\n          this.#valueEnd,\n          this.#onEndThumbFloatingInput,\n          this.#onEndThumbFloatingChange,\n          'endThumb',\n          this.#isVisible('endThumb'),\n          progressEnd\n        )}\n      </div>\n    `;\n  }\n\n  #renderRangeInput(which: 'start' | 'end') {\n    const flag: ThumbFlag = which === 'start' ? 'startThumb' : 'endThumb';\n    const val = which === 'start' ? this.#valueStart : this.#valueEnd;\n    const onInput = which === 'start' ? this.#onRangeStartInput : this.#onRangeEndInput;\n    const h = this.#h[flag];\n    // live() is required: when #onRangeInput snaps the DOM value back via direct input.value\n    // assignment (drag past the other thumb), there is no state change → no re-render. live()\n    // forces Lit to re-read the current DOM value and re-sync it on every render.\n    return html`\n      <input\n        aria-label=\"${which === 'start' ? 'Range start' : 'Range end'}\"\n        class=\"range-${which}\"\n        type=\"range\"\n        .min=\"${String(this.min)}\"\n        .max=\"${String(this.max)}\"\n        .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n        .value=\"${live(val)}\"\n        ?disabled=\"${this.disabled}\"\n        @input=\"${onInput}\"\n        @change=\"${this.#onRangeChange}\"\n        @pointerenter=\"${h.show}\"\n        @pointerleave=\"${h.hide}\"\n        @focus=\"${h.show}\"\n        @blur=\"${h.hide}\"\n      />\n    `;\n  }\n\n  #renderFloatingInput(\n    val: string,\n    onInput: (e: Event) => void,\n    onFloatingChange: (e: Event) => void,\n    flag: ThumbFlag,\n    visible: boolean,\n    progress: number\n  ) {\n    const h = this.#h[flag];\n    // live() is required on the number input: when the debounced setter clamps a value to the\n    // same string it already holds (e.g. typing 150 when max=100 clamps back to '100'), no\n    // reactive property change occurs and Lit skips the DOM update. live() forces a re-read.\n    return html`\n      <div\n        class=${classMap({ 'thumb-input': true, 'thumb-input--visible': visible })}\n        style=${styleMap({ left: ZuiSlider.#thumbPositionCSS(progress) })}\n        @pointerenter=\"${h.show}\"\n        @pointerleave=\"${h.hide}\"\n      >\n        <input\n          aria-label=\"${flag === 'startThumb'\n            ? 'Range start value'\n            : flag === 'endThumb'\n            ? 'Range end value'\n            : 'Slider value'}\"\n          type=\"number\"\n          .value=\"${live(val)}\"\n          .min=\"${String(this.min)}\"\n          .max=\"${String(this.max)}\"\n          .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n          ?disabled=\"${this.disabled}\"\n          ?readonly=\"${this.readOnly}\"\n          @input=\"${onInput}\"\n          @change=\"${onFloatingChange}\"\n          @focus=\"${h.focus}\"\n          @blur=\"${h.blur}\"\n        />\n      </div>\n    `;\n  }\n\n  #renderStepDots() {\n    if (this.step <= 0 || this.#range === 0) {\n      return nothing;\n    }\n    const count = Math.round(this.#range / this.step);\n    if (count > 100) {\n      return nothing;\n    }\n    const dots: TemplateResult[] = [];\n    for (let i = 0; i <= count; i++) {\n      let left: string;\n      if (i === 0) {\n        left = 'var(--zui-slider-thumb-size)';\n      } else if (i === count) {\n        left = 'calc(100% - var(--zui-slider-thumb-size))';\n      } else {\n        const pos = parseFloat((((i * this.step) / this.#range) * 100).toFixed(4));\n        left = ZuiSlider.#thumbPositionCSS(pos);\n      }\n      dots.push(html`<span class=\"step-dot\" style=\"left: ${left}\"></span>`);\n    }\n    return html`<div class=\"step-dots\">${dots}</div>`;\n  }\n\n  #renderMinMaxLabels() {\n    if (!this.showMinMax) {\n      return nothing;\n    }\n    return html`\n      <div class=\"min-max-labels\">\n        <span class=\"min-max-label\">${this.min}</span>\n        <span class=\"min-max-label\">${this.max}</span>\n      </div>\n    `;\n  }\n\n  #onInput(e: Event) {\n    if (this.readOnly) {\n      return;\n    }\n    this.value = (e.target as HTMLInputElement).value;\n  }\n\n  #onChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.#value, bubbles: true }));\n  }\n\n  #processFloatingValue(raw: number): string {\n    const stepDecimals = this.step > 0 ? (String(this.step).split('.')[1] ?? '').length : 0;\n    const stepped = this.step > 0 ? Math.round((raw - this.min) / this.step) * this.step + this.min : raw;\n    const clamped = Math.min(this.max, Math.max(this.min, stepped));\n    return stepDecimals > 0 ? clamped.toFixed(stepDecimals) : String(Math.round(clamped));\n  }\n\n  #makeFloatingChange(flag: ThumbFlag, setter: (val: string) => void, dispatch: () => void) {\n    return (e: Event) => {\n      if (this.readOnly) {\n        return;\n      }\n      const input = e.target as HTMLInputElement;\n      if (input.value === '') {\n        return;\n      }\n      const entry = this.#thumbInputState.get(flag)!;\n      clearTimeout(entry.debounceTimer);\n      entry.debounceTimer = undefined;\n      setter(this.#processFloatingValue(parseFloat(input.value)));\n      dispatch();\n    };\n  }\n\n  #onFloatingInput(flag: ThumbFlag, setter: (val: string) => void) {\n    return (e: Event) => {\n      if (this.readOnly) {\n        return;\n      }\n      const input = e.target as HTMLInputElement;\n      if (input.value === '') {\n        return;\n      }\n      const raw = parseFloat(input.value);\n      const entry = this.#thumbInputState.get(flag)!;\n      clearTimeout(entry.debounceTimer);\n      entry.debounceTimer = setTimeout(() => setter(this.#processFloatingValue(raw)), 300);\n    };\n  }\n\n  #onRangeInput(which: 'start' | 'end') {\n    return (e: Event) => {\n      if (this.readOnly) {\n        return;\n      }\n      const input = e.target as HTMLInputElement;\n      if (which === 'start') {\n        if (parseFloat(input.value) >= parseFloat(this.#valueEnd)) {\n          input.value = this.#valueStart;\n          return;\n        }\n        this.valueStart = input.value;\n      } else {\n        if (parseFloat(input.value) <= parseFloat(this.#valueStart)) {\n          input.value = this.#valueEnd;\n          return;\n        }\n        this.valueEnd = input.value;\n      }\n    };\n  }\n\n  #onRangeChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { valueStart: this.#valueStart, valueEnd: this.#valueEnd },\n        bubbles: true,\n      })\n    );\n  }\n\n  #showThumbInput(flag: ThumbFlag) {\n    if (this.disabled) {\n      return;\n    }\n    const entry = this.#thumbInputState.get(flag)!;\n    clearTimeout(entry.timer);\n    entry.timer = undefined;\n    entry.visible = true;\n    this.requestUpdate();\n  }\n\n  #scheduleHideThumbInput(flag: ThumbFlag) {\n    const entry = this.#thumbInputState.get(flag)!;\n    clearTimeout(entry.timer);\n    entry.timer = setTimeout(() => {\n      if (!entry.focused) {\n        entry.visible = false;\n        this.requestUpdate();\n      }\n    }, 100);\n  }\n\n  #focusFloatingInput(flag: ThumbFlag) {\n    if (this.disabled) {\n      return;\n    }\n    this.#showThumbInput(flag);\n    this.#thumbInputState.get(flag)!.focused = true;\n  }\n\n  #blurFloatingInput(flag: ThumbFlag) {\n    const entry = this.#thumbInputState.get(flag)!;\n    entry.focused = false;\n    this.#scheduleHideThumbInput(flag);\n  }\n\n  // Maps a 0–100 progress value to a CSS multiplier for --zui-slider-thumb-size so that\n  // `progress% + thumbSize * offset` lands on the thumb center within the inset wrapper.\n  // At 0%: offset=1.5 → thumbSize*1.5 (thumb center at min). At 100%: offset=-1.5 → -thumbSize*1.5 (thumb center at max).\n  static #thumbCenterOffset(progress: number): number {\n    return 1.5 - (3 * progress) / 100;\n  }\n\n  static #thumbPositionCSS(progress: number): string {\n    return `calc(${progress}% + var(--zui-slider-thumb-size) * ${ZuiSlider.#thumbCenterOffset(progress)})`;\n  }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-slider': ZuiSlider;\n  }\n}\n"]}

package/docs/demo.html

@@ -11,37 +11,158 @@
   import("../../../../scripts/demo/demo.js");
 </script>
 
+<!-- ─── Single mode ──────────────────────────────────────────────────── -->
+
 <section component="zui-slider" heading="Basic slider">
   <zui-slider></zui-slider>
 </section>
 
-<section component="zui-slider" heading="Stepped slider">
+<section component="zui-slider" heading="Stepped slider (step=10)">
   <zui-slider step="10"></zui-slider>
 </section>
 
-<section component="zui-slider" heading="Stepped slider, incremented by decimals">
+<section component="zui-slider" heading="Stepped slider with decimal increments (step=0.01)">
   <zui-slider step="0.01" value="50.01"></zui-slider>
 </section>
 
-<section component="zui-slider" heading="Bounded slider">
+<section component="zui-slider" heading="Bounded slider (min=25, max=75)">
   <zui-slider min="25" max="75"></zui-slider>
 </section>
 
-<section component="zui-slider" heading="Bounded slider with negative values">
+<section component="zui-slider" heading="Bounded slider with negative values (min=-50, max=50)">
   <zui-slider value="0" min="-50" max="50"></zui-slider>
 </section>
 
-<section component="zui-slider" heading="Slider with no text">
-  <zui-slider no-text></zui-slider>
+<section component="zui-slider" heading="Min/max labels">
+  <zui-slider show-min-max></zui-slider>
+</section>
+
+<section component="zui-slider" heading="Min/max labels with custom bounds">
+  <zui-slider show-min-max min="0" max="1000" value="300" step="100"></zui-slider>
+</section>
+
+<section component="zui-slider" heading="Disabled slider">
+  <zui-slider disabled value="35"></zui-slider>
+</section>
+
+<section component="zui-slider" heading="Read-only slider">
+  <zui-slider readonly value="65"></zui-slider>
 </section>
 
-<section component="zui-slider" heading="Programatically set slider value">
+<section component="zui-slider" heading="Programmatically set slider value">
   <zui-slider id="zuiSliderDemoProgrammatic"></zui-slider>
-  <zui-button id="zuiSliderDemoButton">Click me</zui-button>
+  <zui-button id="zuiSliderDemoButton">Randomise</zui-button>
 
   <script>
-    document.getElementById("zuiSliderDemoButton").addEventListener("click", (e) => {
+    document.getElementById("zuiSliderDemoButton").addEventListener("click", () => {
       document.getElementById("zuiSliderDemoProgrammatic").value = Math.floor(Math.random() * 100);
     });
   </script>
 </section>
+
+<section component="zui-slider" heading="Change event (single mode)">
+  <zui-slider id="zuiSliderDemoChange"></zui-slider>
+  <p>Last change: <strong id="zuiSliderDemoChangeOutput">—</strong></p>
+
+  <script>
+    document.getElementById("zuiSliderDemoChange").addEventListener("change", (e) => {
+      document.getElementById("zuiSliderDemoChangeOutput").textContent = e.detail;
+    });
+  </script>
+</section>
+
+<!-- ─── Range mode ──────────────────────────────────────────────────── -->
+
+<section component="zui-slider" heading="Range slider">
+  <zui-slider range></zui-slider>
+</section>
+
+<section component="zui-slider" heading="Range slider with initial values (value-start=20, value-end=80)">
+  <zui-slider range value-start="20" value-end="80"></zui-slider>
+</section>
+
+<section component="zui-slider" heading="Range slider with step and min/max labels">
+  <zui-slider range step="10" show-min-max></zui-slider>
+</section>
+
+<section component="zui-slider" heading="Range slider with custom bounds (min=0, max=500, step=50)">
+  <zui-slider range min="0" max="500" step="50" value-start="100" value-end="400" show-min-max></zui-slider>
+</section>
+
+<section component="zui-slider" heading="Range slider with decimal step (step=0.5)">
+  <zui-slider range step="0.5" value-start="1.5" value-end="3.5" min="0" max="5" show-min-max></zui-slider>
+</section>
+
+<section component="zui-slider" heading="Disabled range slider">
+  <zui-slider range disabled value-start="20" value-end="70"></zui-slider>
+</section>
+
+<section component="zui-slider" heading="Read-only range slider">
+  <zui-slider range readonly value-start="30" value-end="60"></zui-slider>
+</section>
+
+<section component="zui-slider" heading="Change event (range mode)">
+  <zui-slider range id="zuiSliderDemoRangeChange" value-start="25" value-end="75"></zui-slider>
+  <p>Last change: <strong id="zuiSliderDemoRangeChangeOutput">—</strong></p>
+
+  <script>
+    document.getElementById("zuiSliderDemoRangeChange").addEventListener("change", (e) => {
+      const { valueStart, valueEnd } = e.detail;
+      document.getElementById("zuiSliderDemoRangeChangeOutput").textContent =
+        `valueStart=${valueStart}, valueEnd=${valueEnd}`;
+    });
+  </script>
+</section>
+
+<section component="zui-slider" heading="Programmatically set range values">
+  <zui-slider range id="zuiSliderDemoRangeProgrammatic" value-start="20" value-end="80"></zui-slider>
+  <zui-button id="zuiSliderDemoRangeButton">Randomise</zui-button>
+
+  <script>
+    document.getElementById("zuiSliderDemoRangeButton").addEventListener("click", () => {
+      const el = document.getElementById("zuiSliderDemoRangeProgrammatic");
+      const a = Math.floor(Math.random() * 50);
+      const b = Math.floor(Math.random() * 50) + 50;
+      el.valueStart = String(a);
+      el.valueEnd = String(b);
+    });
+  </script>
+</section>
+
+<!-- ─── Form integration ─────────────────────────────────────────────── -->
+
+<section component="zui-slider" heading="Form integration (single mode)">
+  <form id="zuiSliderDemoForm">
+    <zui-slider name="rating" value="50" show-min-max></zui-slider>
+    <br />
+    <zui-button><button type="submit">Submit</button></zui-button>
+    <zui-button><button type="reset">Reset</button></zui-button>
+  </form>
+  <p>Submitted value: <strong id="zuiSliderDemoFormOutput">—</strong></p>
+
+  <script>
+    document.getElementById("zuiSliderDemoForm").addEventListener("submit", (e) => {
+      e.preventDefault();
+      const data = new FormData(e.target);
+      document.getElementById("zuiSliderDemoFormOutput").textContent = data.get("rating");
+    });
+  </script>
+</section>
+
+<section component="zui-slider" heading="Form integration (range mode)">
+  <form id="zuiSliderDemoRangeForm">
+    <zui-slider range name="priceRange" value-start="20" value-end="80" show-min-max></zui-slider>
+    <br />
+    <zui-button><button type="submit">Submit</button></zui-button>
+    <zui-button><button type="reset">Reset</button></zui-button>
+  </form>
+  <p>Submitted value: <strong id="zuiSliderDemoRangeFormOutput">—</strong></p>
+
+  <script>
+    document.getElementById("zuiSliderDemoRangeForm").addEventListener("submit", (e) => {
+      e.preventDefault();
+      const data = new FormData(e.target);
+      document.getElementById("zuiSliderDemoRangeFormOutput").textContent = data.get("priceRange");
+    });
+  </script>
+</section>

package/lab.html

@@ -52,10 +52,44 @@
   <h3>zui slider no text</h3>
   <zui-slider id="text" no-text></zui-slider>
 
+  <h3>zui slider show min/max</h3>
+  <zui-slider id="show-min-max" show-min-max></zui-slider>
+
+  <h3>zui slider stepped + show min/max</h3>
+  <zui-slider id="stepped-min-max" step="10" show-min-max></zui-slider>
+
   <h3>set zui slider programmatically</h3>
   <button id="clickme">Click me</button>
   <zui-slider id="programmatic"></zui-slider>
 
+  <h3>range slider (basic)</h3>
+  <zui-slider id="range-basic" range></zui-slider>
+
+  <h3>range slider with initial values</h3>
+  <zui-slider id="range-values" range value-start="20" value-end="80"></zui-slider>
+  
+  <h3>range slider with min and max</h3>
+  <zui-slider id="range-min-max" range min="25" max="75" value-start="30" value-end="60"></zui-slider>
+
+  <h3>range slider stepped</h3>
+  <zui-slider id="range-stepped" range step="10" value-start="20" value-end="60"></zui-slider>
+
+  <h3>range slider no text</h3>
+  <zui-slider id="range-no-text" range no-text></zui-slider>
+
+  <h3>range slider disabled</h3>
+  <zui-slider id="range-disabled" range disabled value-start="30" value-end="70"></zui-slider>
+
+  <h3>range slider show min/max</h3>
+  <zui-slider id="range-show-min-max" range show-min-max></zui-slider>
+
+  <h3>range slider stepped + show min/max</h3>
+  <zui-slider id="range-stepped-min-max" range step="10" value-start="20" value-end="60" show-min-max></zui-slider>
+
+  <h3>set range slider programmatically</h3>
+  <button id="clickme-range">Reset range</button>
+  <zui-slider id="range-programmatic" range value-start="10" value-end="90"></zui-slider>
+
   <script>
     // zui-base-styles needs this for dumb IE11 if you add rel="zui-stylesheet"
     // window.zui.importCustomStyles();
@@ -64,13 +98,23 @@
     // customElements.define = function () { };
 
     document.querySelectorAll('zui-slider').forEach(el => el.addEventListener('change', (e) => {
-      console.log(`id: ${e.target.id}, value: ${e.target.value}`);
+      if (e.target.range) {
+        console.log(`id: ${e.target.id}, valueStart: ${e.detail.valueStart}, valueEnd: ${e.detail.valueEnd}`);
+      } else {
+        console.log(`id: ${e.target.id}, value: ${e.target.value}`);
+      }
     }));
 
     document.getElementById("clickme").addEventListener("click", (e) => {
       document.getElementById("programmatic").value = "20";
     });
 
+    document.getElementById("clickme-range").addEventListener("click", () => {
+      const el = document.getElementById("range-programmatic");
+      el.valueStart = "10";
+      el.valueEnd = "90";
+    });
+
   </script>
 </body>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-slider",
-  "version": "4.3.2",
+  "version": "4.4.0-pre.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -24,5 +24,8 @@
     "@zywave/zui-base": "^4.6.1"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "6ccacba5d09f8f9b2548272f06482a8c392af6c9"
+  "devDependencies": {
+    "@zywave/zui-input": "^4.2.3"
+  },
+  "gitHead": "bfb39a7f1add66395af991389c24b1774bf8b97c"
 }

package/src/css/zui-slider.fouc.scss

@@ -2,6 +2,80 @@
 
 zui-slider {
   @include undefined-element {
-    /* insert FOUC styles here */
+    --zui-slider-thumb-size: #{rem(14)};
+
+    position: relative;
+    display: block;
+    padding: calc(var(--zui-slider-thumb-size) / 2) 0;
+
+    // Track — filled to default 50% (CSS cannot read the value attribute for positioning)
+    &::before {
+      display: block;
+      content: '';
+      height: rem(4);
+      background: linear-gradient(to right,
+      transparent var(--zui-slider-thumb-size),
+      var(--zui-blue) var(--zui-slider-thumb-size),
+      var(--zui-blue) 50%,
+      var(--zui-gray-200) 50%,
+      var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)),
+      transparent calc(100% - var(--zui-slider-thumb-size)));
+      border-radius: rem(3);
+    }
+
+    // Thumb at default 50% position
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      content: '';
+      width: var(--zui-slider-thumb-size);
+      height: var(--zui-slider-thumb-size);
+      background-color: var(--zui-blue);
+      border-radius: 50%;
+      cursor: pointer;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+zui-slider[range] {
+  @include undefined-element {
+    // Track — default range covers full width (valueStart=0, valueEnd=100), with transparent insets
+    &::before {
+      background: linear-gradient(to right,
+      transparent var(--zui-slider-thumb-size),
+      var(--zui-blue) var(--zui-slider-thumb-size),
+      var(--zui-blue) calc(100% - var(--zui-slider-thumb-size)),
+      transparent calc(100% - var(--zui-slider-thumb-size)));
+    }
+
+    // Range has two thumbs at 0% and 100%; suppress the single thumb pseudo-element
+    &::after {
+      display: none;
+    }
+  }
+}
+
+zui-slider[disabled] {
+  @include undefined-element {
+    cursor: not-allowed;
+
+    &::before {
+      background: var(--zui-gray-200);
+    }
+
+    &::after {
+      background-color: var(--zui-gray);
+      cursor: not-allowed;
+    }
+  }
+}
+
+zui-slider[range][disabled] {
+  @include undefined-element {
+    &::before {
+      background: var(--zui-gray-200);
+    }
   }
 }

package/src/zui-slider-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 
-export const style = css`:host{--zui-slider-thumb-size: 1.875rem;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host input{width:100%;height:.25rem;vertical-align:middle;background:var(--zui-gray-200);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none}:host input:disabled{cursor:not-allowed}:host input::-webkit-slider-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;-webkit-appearance:none}:host input:disabled::-webkit-slider-thumb{background-color:var(--zui-gray)}:host input::-moz-range-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border:0;border-radius:50%;-moz-appearance:none}:host input:disabled::-moz-range-thumb{background-color:var(--zui-gray)}:host span{position:absolute;top:.0625rem;display:flex;width:var(--zui-slider-thumb-size);height:100%;justify-content:center;align-items:center;font-weight:600;color:#fff;pointer-events:none}`;
+export const style = css`:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border:0;border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:disabled{cursor:not-allowed}:host input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:pointer;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:pointer;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([disabled]){cursor:not-allowed}:host([disabled]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;