Slider and RangeSlider

Use CSlider to choose one value from a bounded exact-decimal scale. Use CRangeSlider when the user chooses an ordered lower and upper value.

<c-CField>
  <c-fill name="label">Volume</c-fill>
  <c-fill name="default">
    <c-CSlider name="volume" value="40" min="0" max="100" />
  </c-fill>
</c-CField>

<c-CField>
  <c-fill name="label">Price range</c-fill>
  <c-fill name="default">
    <c-CRangeSlider name="price" c-value="(20, 80)" min="0" max="100" />
  </c-fill>
</c-CField>

Choose one value

Show code

from decimal import Decimal
from typing import Any

import citry_ui
from citry import Component, citry
from citry_ui import CSlider

citry.register_library(citry_ui)


class BasicSlider(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    def template_data(self, kwargs: Kwargs, slots: Slots) -> dict[str, Any]:  # noqa: ARG002
        return {
            "python_slider": CSlider(
                value=Decimal("0.5"),
                min=Decimal(0),
                max=Decimal(1),
                step=Decimal("0.1"),
                input_attrs={"aria-label": "Python opacity"},
            )
        }

    template = """
      <section class="slider-example-grid">
        <c-CField>
          <c-fill name="label">Volume</c-fill>
          <c-fill name="description">Use arrow keys for one-percent steps.</c-fill>
          <c-fill name="default"><c-CSlider name="volume" value="40" /></c-fill>
        </c-CField>
        <article><h3>Python composition</h3>{{ python_slider }}</article>
      </section>
    """
    css = """
      :where(.slider-example-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.5rem}
      :where(.slider-example-grid article){display:grid;gap:.75rem}:where(.slider-example-grid h3){margin:0}
    """


preview = BasicSlider()
preview  # noqa: B018

Choose a value range

Show code

from citry import Component


class RangeSliderExample(Component):
    template = """
      <c-CField>
        <c-fill name="label">Price range</c-fill>
        <c-fill name="description">Lower and upper values stay at least 10 apart.</c-fill>
        <c-fill name="default">
          <c-CRangeSlider name="price" c-value="(20, 80)" c-min_steps_between_thumbs="10" />
        </c-fill>
      </c-CField>
    """


preview = RangeSliderExample()
preview  # noqa: B018

Choose exact values

Server inputs accept int, Decimal, or a canonical plain-decimal string. Floats and exponent notation are rejected. The difference between min and max must contain a whole number of step intervals, capped at one million. Form submission and callbacks use canonical ASCII strings, so values such as Decimal("0.300") submit as 0.3 without binary-float drift.

large_step controls Page Up and Page Down. It defaults to ten steps. Marks label selected grid positions; they do not add selectable values or alter the step grid.

Use an exact decimal scale

Show code

from decimal import Decimal
from typing import Any

from citry import Component


class ExactDecimalSlider(Component):
    def template_data(self, kwargs: Any, slots: Any) -> dict[str, Any]:  # noqa: ARG002
        return {
            "value": Decimal("0.30"),
            "marks": {Decimal("0.1"): "Low", Decimal("0.3"): "Target", Decimal("0.5"): "High"},
        }

    template = """
      <c-CField>
        <c-fill name="label">Opacity</c-fill>
        <c-fill name="description">Exact 0.05 steps avoid binary floating-point drift.</c-fill>
        <c-fill name="default">
          <c-CSlider c-value="value" min="0.1" max="0.5" step="0.05" c-marks="marks" show_value="always" />
        </c-fill>
      </c-CField>
    """


preview = ExactDecimalSlider()
preview  # noqa: B018

Label selected values

Show code

from typing import Any

from citry import Component


class SliderMarks(Component):
    def template_data(self, kwargs: Any, slots: Any) -> dict[str, Any]:  # noqa: ARG002
        return {"marks": {0: "Silent", 25: "Quiet", 50: "Medium", 75: "Loud", 100: "Maximum"}}

    template = """
      <c-CField>
        <c-fill name="label">Playback volume</c-fill>
        <c-fill name="default"><c-CSlider value="50" c-marks="marks" show_value="always" /></c-fill>
      </c-CField>
    """


preview = SliderMarks()
preview  # noqa: B018

Pick one value or an interval

CSlider contributes one form entry. CRangeSlider name="price" contributes two ordered entries with the same name. Use lower_name and upper_name together when the server expects distinct field names.

Range thumbs keep their lower and upper identities, remain in the same Tab order, and do not cross, swap, or push each other. min_steps_between_thumbs sets a grid-step gap between them.

Submit Slider values

Show code

from citry import Component


class SliderForm(Component):
    template = """
      <form
        x-data="{result:'Submit to inspect values'}"
        @submit.prevent="result=JSON.stringify(Array.from(new FormData($event.target).entries()))"
        class="slider-example-stack"
      >
        <c-CField>
          <c-fill name="label">Budget</c-fill>
          <c-fill name="default">
            <c-CRangeSlider lower_name="minimum" upper_name="maximum" c-value="(25, 75)" />
          </c-fill>
        </c-CField>
        <div><button type="submit">Submit</button> <button type="reset">Reset</button></div>
        <output x-text="result">Submit to inspect values</output>
      </form>
    """
    css = ":where(.slider-example-stack){display:grid;gap:1rem;max-inline-size:32rem}"


preview = SliderForm()
preview  # noqa: B018

Keyboard and pointer behavior

Arrow Right and Arrow Up add one step; Arrow Left and Arrow Down subtract one. Page Up and Page Down use large_step; Home and End move to the current thumb's allowed bounds. For a range, Tab visits lower then upper. Horizontal pointer geometry mirrors in RTL while keyboard value direction stays stable.

The no-JavaScript fallback is one native range input for CSlider and two clearly labeled native range inputs for CRangeSlider. Once enhanced, the styled thumbs take over interaction while the native controls continue to own form submission and reset.

Use vertical Sliders

Show code

from citry import Component


class VerticalSliders(Component):
    template = """
      <section class="vertical-slider-row">
        <c-CSlider value="30" orientation="vertical" c-input_attrs="{'aria-label':'Level'}" />
        <c-CRangeSlider c-value="(20, 70)" orientation="vertical" lower_label="Floor" upper_label="Ceiling" />
      </section>
    """
    css = ":where(.vertical-slider-row){display:flex;gap:3rem;min-block-size:14rem;align-items:center}"


preview = VerticalSliders()
preview  # noqa: B018

Controlled values and callbacks

Omitting client value leaves the component uncontrolled. Supplying it through $c-props makes every interaction a request: the thumb moves only after the owner returns the requested value. onValueChange fires during each accepted pointer or keyboard step. onValueChangeEnd fires once at the end of a pointer gesture and once after a keyboard request.

<div x-data="{ price: ['20', '80'] }">
  <c-CRangeSlider
    c-value="(20, 80)"
    $c-props="{
      value: price,
      onValueChange: (next) => price = next,
    }"
  />
</div>

Control Slider values

Show code

from citry import Component


class ControlledRangeSlider(Component):
    template = """
      <section x-data="{range:['20','80']}" class="slider-example-stack">
        <c-CRangeSlider
          c-value="(20, 80)"
          $c-props="{value:range,onValueChange:(next)=>range=next}"
        />
        <output x-text="`Selected ${range[0]} through ${range[1]}`">Selected 20 through 80</output>
      </section>
    """
    css = ":where(.slider-example-stack){display:grid;gap:1rem;max-inline-size:32rem}"


preview = ControlledRangeSlider()
preview  # noqa: B018

Labels, fields, and localization

Wrap either component in CField for its visible label, description, error, disabled, readonly, and invalid state. A standalone CSlider needs an accessible name through input_attrs. CRangeSlider combines the Field label with localized “Lower value” and “Upper value” labels; override those strings with lower_label and upper_label when the application needs domain-specific names.

Displayed values and aria-valuetext use the number.citry-ui-slider profile. Under a client-enabled c-i18n provider, thumb labels and formatted values update after a browser-side locale switch. Canonical form values never change.

Format localized Slider values

Show code

from citry import Component


class LocalizedSlider(Component):
    template = """
      <section class="slider-example-stack">
        <p>Inside a client-enabled <code>&lt;c-i18n&gt;</code>, labels and formatted values switch locale in place.</p>
        <c-CRangeSlider c-value="('1234.5', '5678.5')" min="0" max="10000" step="0.5" show_value="always" />
        <p>Canonical Form values remain <code>1234.5</code> and <code>5678.5</code>.</p>
      </section>
    """
    css = ":where(.slider-example-stack){display:grid;gap:1rem;max-inline-size:36rem}"


preview = LocalizedSlider()
preview  # noqa: B018

State and customization

readonly preserves a submitted value and focusable slider semantics while blocking mutation. disabled removes interaction and form participation. Choose solid or subtle, three sizes, horizontal or vertical orientation, and never, interaction, or always value bubbles. Use the documented CSS variables and part selectors for styling; attrs and input-attribute mappings cannot replace state, form, identity, or accessibility attributes owned by the component.

Compare Slider states

Show code

from citry import Component


class SliderStates(Component):
    template = """
      <section class="slider-state-grid">
        <c-CSlider value="30" variant="solid" size="sm" c-input_attrs="{'aria-label':'Small solid'}" />
        <c-CSlider value="50" variant="subtle" show_value="always" c-input_attrs="{'aria-label':'Subtle'}" />
        <c-CSlider value="70" size="lg" readonly c-input_attrs="{'aria-label':'Readonly'}" />
        <c-CSlider value="90" disabled invalid c-input_attrs="{'aria-label':'Disabled invalid'}" />
      </section>
    """
    css = ":where(.slider-state-grid){display:grid;gap:1.5rem;max-inline-size:36rem}"


preview = SliderStates()
preview  # noqa: B018

API reference

Inputs

CSlider server inputs

Server inputs are passed in a template through <c-CSlider ... /> or in Python through CSlider(...).

Input	Type	Default	Effect
`value`	`CSliderExact \| None` (`CSliderExact`)	`None`	Sets the initial exact value; None uses min.
`name`	`str \| None`	`None`	Names the progressive native Form entry.
`form`	`str \| None`	`None`	Associates the Form entry with an external Form ID.
`id`	`str \| None`	generated	Sets the public native input ID and enhanced label target.
`min`	`CSliderExact` (`CSliderExact`)	`0`	Sets the inclusive exact minimum and step-grid origin.
`max`	`CSliderExact` (`CSliderExact`)	`100`	Sets the inclusive exact maximum.
`step`	`CSliderExact` (`CSliderExact`)	`1`	Sets the positive exact grid interval.
`large_step`	`CSliderExact \| None` (`CSliderExact`)	Ten steps.	Sets the positive whole-step Page Up and Page Down interval.
`disabled`	`bool \| None`	`None`	Blocks focus mutation and Form participation outside Field.
`readonly`	`bool \| None`	`None`	Preserves focus and submission while blocking mutation outside Field.
`invalid`	`bool \| None`	`None`	Reflects application invalid state outside Field.
`orientation`	`"horizontal" \| "vertical"` (`CSliderOrientation`)	`"horizontal"`	Selects track orientation.
`variant`	`"solid" \| "subtle"` (`CSliderVariant`)	`"solid"`	Selects visual treatment.
`size`	`"sm" \| "md" \| "lg"` (`CSliderSize`)	`"md"`	Selects track and thumb sizing.
`show_value`	`"never" \| "interaction" \| "always"` (`CSliderShowValue`)	`"interaction"`	Controls localized value bubbles.
`show_marks`	`bool \| None`	True when marks exist.	Shows or hides mark dots and labels.
`marks`	`Mapping[CSliderExact, str] \| Sequence[CSliderExact] \| None`	`None`	Adds up to 101 bounded step-grid marks.
`format`	`str`	`"citry-ui-slider"`	Selects the named i18n number format profile for visible and accessible values.
`class_`	`CClassValue \| None` (`CClassValue`)	`None`	Adds classes to the documented root and merges with attrs.
`style`	`CStyleValue \| None` (`CStyleValue`)	`None`	Adds styles to the documented root and merges with attrs.
`attrs`	`Mapping[str, object] \| None`	`None`	Adds copied allowed root attributes without replacing owned state or identity.
`input_attrs`	`Mapping[str, object] \| None`	`None`	Adds copied allowed native-input attributes including standalone accessible naming.

CRangeSlider server inputs

Server inputs are passed in a template through <c-CRangeSlider ... /> or in Python through CRangeSlider(...).

Input	Type	Default	Effect
`value`	`tuple[CSliderExact, CSliderExact] \| None` (`CSliderExact`)	(min, max)	Sets the initial ordered lower and upper exact values.
`name`	`str \| None`	`None`	Names both ordered Form entries when separate names are omitted.
`lower_name`	`str \| None`	`None`	Names the lower Form entry when supplied together with upper_name.
`upper_name`	`str \| None`	`None`	Names the upper Form entry when supplied together with lower_name.
`form`	`str \| None`	`None`	Associates both Form entries with an external Form ID.
`id`	`str \| None`	generated	Sets the lower native input ID and bases the generated upper and root IDs.
`min`	`CSliderExact` (`CSliderExact`)	`0`	Sets the inclusive exact minimum and step-grid origin.
`max`	`CSliderExact` (`CSliderExact`)	`100`	Sets the inclusive exact maximum.
`step`	`CSliderExact` (`CSliderExact`)	`1`	Sets the positive exact grid interval.
`large_step`	`CSliderExact \| None` (`CSliderExact`)	Ten steps.	Sets the positive whole-step Page Up and Page Down interval.
`min_steps_between_thumbs`	`int`	`0`	Keeps this many grid intervals between fixed lower and upper thumbs.
`disabled`	`bool \| None`	`None`	Blocks focus mutation and Form participation outside Field.
`readonly`	`bool \| None`	`None`	Preserves focus and ordered submission while blocking mutation outside Field.
`invalid`	`bool \| None`	`None`	Reflects application invalid state outside Field.
`orientation`	`"horizontal" \| "vertical"` (`CSliderOrientation`)	`"horizontal"`	Selects track orientation.
`variant`	`"solid" \| "subtle"` (`CSliderVariant`)	`"solid"`	Selects visual treatment.
`size`	`"sm" \| "md" \| "lg"` (`CSliderSize`)	`"md"`	Selects track and thumb sizing.
`show_value`	`"never" \| "interaction" \| "always"` (`CSliderShowValue`)	`"interaction"`	Controls both localized value bubbles.
`show_marks`	`bool \| None`	True when marks exist.	Shows or hides mark dots and labels.
`marks`	`Mapping[CSliderExact, str] \| Sequence[CSliderExact] \| None`	`None`	Adds up to 101 bounded step-grid marks.
`format`	`str`	`"citry-ui-slider"`	Selects the named i18n number format profile for both values.
`lower_label`	`str`	`"Lower value"`	Overrides the catalog-backed lower-thumb accessible name.
`upper_label`	`str`	`"Upper value"`	Overrides the catalog-backed upper-thumb accessible name.
`class_`	`CClassValue \| None` (`CClassValue`)	`None`	Adds classes to the documented root and merges with attrs.
`style`	`CStyleValue \| None` (`CStyleValue`)	`None`	Adds styles to the documented root and merges with attrs.
`attrs`	`Mapping[str, object] \| None`	`None`	Adds copied allowed root attributes without replacing owned state or identity.
`lower_input_attrs`	`Mapping[str, object] \| None`	`None`	Adds copied allowed attributes to the lower native input.
`upper_input_attrs`	`Mapping[str, object] \| None`	`None`	Adds copied allowed attributes to the upper native input.

CSlider client inputs

Client inputs are passed in the browser through the $c-props="{ ... }" attribute on <c-CSlider />.

Input	Type	Omitted behavior	Effect
`value`	`canonical decimal string`	Releases control to the last uncontrolled value.	Controls the exact value while supplied.
`min`	`canonical decimal string`	Uses the server value.	Replaces the minimum when the resulting grid is valid.
`max`	`canonical decimal string`	Uses the server value.	Replaces the maximum when the resulting grid is valid.
`step`	`positive canonical decimal string`	Uses the server value.	Replaces the grid interval when min and max contain whole steps.
`largeStep`	`positive canonical decimal string`	Uses the server value.	Replaces the Page Up and Page Down interval.
`disabled`	`boolean`	Uses server or owner state.	Controls mutation and Form participation.
`readonly`	`boolean`	Uses server or owner state.	Controls focusable nonmutable state.
`invalid`	`boolean`	Uses server or Field state.	Controls application invalid state.
`orientation`	`CSliderOrientation` (`CSliderOrientation`)	Uses the server value.	Controls track orientation.
`variant`	`CSliderVariant` (`CSliderVariant`)	Uses the server value.	Controls visual treatment.
`size`	`CSliderSize` (`CSliderSize`)	Uses the server value.	Controls coordinated sizing.
`showValue`	`CSliderShowValue` (`CSliderShowValue`)	Uses the server value.	Controls value-bubble visibility.
`format`	`string`	Uses the server profile.	Controls locale-aware visible and accessible value formatting.
`onValueChange`	`function`	No live value callback.	Receives each user value request.
`onValueChangeEnd`	`function`	No completed-interaction callback.	Receives each keyboard request and completed pointer gesture.

CRangeSlider client inputs

Client inputs are passed in the browser through the $c-props="{ ... }" attribute on <c-CRangeSlider />.

Input	Type	Omitted behavior	Effect
`value`	`[canonical decimal string, canonical decimal string]`	Releases control to the last uncontrolled pair.	Controls the ordered exact pair while supplied.
`min`	`canonical decimal string`	Uses the server value.	Replaces the minimum when the resulting grid is valid.
`max`	`canonical decimal string`	Uses the server value.	Replaces the maximum when the resulting grid is valid.
`step`	`positive canonical decimal string`	Uses the server value.	Replaces the grid interval when min and max contain whole steps.
`largeStep`	`positive canonical decimal string`	Uses the server value.	Replaces the Page Up and Page Down interval.
`minStepsBetweenThumbs`	`nonnegative integer`	Uses the server value.	Controls the minimum lower-to-upper grid gap.
`disabled`	`boolean`	Uses server or owner state.	Controls mutation and Form participation.
`readonly`	`boolean`	Uses server or owner state.	Controls focusable nonmutable state.
`invalid`	`boolean`	Uses server or Field state.	Controls application invalid state.
`orientation`	`CSliderOrientation` (`CSliderOrientation`)	Uses the server value.	Controls track orientation.
`variant`	`CSliderVariant` (`CSliderVariant`)	Uses the server value.	Controls visual treatment.
`size`	`CSliderSize` (`CSliderSize`)	Uses the server value.	Controls coordinated sizing.
`showValue`	`CSliderShowValue` (`CSliderShowValue`)	Uses the server value.	Controls both value bubbles.
`format`	`string`	Uses the server profile.	Controls locale-aware visible and accessible value formatting.
`onValueChange`	`function`	No live value callback.	Receives each ordered-pair request.
`onValueChangeEnd`	`function`	No completed-interaction callback.	Receives each keyboard request and completed pointer gesture.

Slots

Events

Component events are callback inputs supplied through $c-props. Native browser events remain available through Alpine @... attributes.

CSlider events

Event	Signature	Trigger and timing	Detail	Controlled and cancellation behavior
`onValueChange`	`(value: string, detail: CSliderValueChangeDetail) => void` (`CSliderValueChangeDetail`)	Each pointer-drag or keyboard value request.	`{value, previousValue, controlled, source, sourceEvent, phase}` (`CSliderValueChangeDetail`)	Uncontrolled state and native Form value update before notification; controlled state is request-only.
`onValueChangeEnd`	`(value: string, detail: CSliderValueChangeDetail) => void` (`CSliderValueChangeDetail`)	A keyboard request or completed changed pointer gesture.	`{value, previousValue, controlled, source, sourceEvent, phase}` (`CSliderValueChangeDetail`)	Reports the final requested value once per completed interaction.

CRangeSlider events

Event	Signature	Trigger and timing	Detail	Controlled and cancellation behavior
`onValueChange`	`(value: tuple[str, str], detail: CRangeSliderValueChangeDetail) => void` (`CRangeSliderValueChangeDetail`)	Each lower or upper pointer-drag or keyboard pair request.	`{value, previousValue, controlled, source, sourceEvent, phase, activeThumb}` (`CRangeSliderValueChangeDetail`)	Preserves ordered stable thumb identity; controlled state is request-only.
`onValueChangeEnd`	`(value: tuple[str, str], detail: CRangeSliderValueChangeDetail) => void` (`CRangeSliderValueChangeDetail`)	A keyboard request or completed changed pointer gesture.	`{value, previousValue, controlled, source, sourceEvent, phase, activeThumb}` (`CRangeSliderValueChangeDetail`)	Reports the final requested ordered pair once per completed interaction.

Methods

CSS

CSS variables to theme the components. Set them on an ancestor or the component itself.

CSlider CSS variables

Apply these variables to CSlider or one of its ancestors.

Variable	Type	Purpose	Default
`--cui-slider-track-color`	`color`	Unfilled rail color.	`Mixed CanvasText.`
`--cui-slider-fill-color`	`color`	Selected rail color.	`AccentColor`
`--cui-slider-thumb-color`	`color`	Thumb fill.	`Canvas`
`--cui-slider-thumb-border-color`	`color`	Thumb outline.	`AccentColor`
`--cui-slider-focus-color`	`color`	Keyboard focus ring.	`Highlight`
`--cui-slider-mark-color`	`color`	Mark dots.	`CanvasText`
`--cui-slider-value-background`	`color`	Value-bubble background.	`High-contrast ink.`
`--cui-slider-value-foreground`	`color`	Value-bubble text.	`High-contrast surface.`
`--cui-slider-track-size`	`length`	Rail thickness.	`0.375rem`
`--cui-slider-thumb-size`	`length`	Thumb diameter.	`1.25rem`
`--cui-slider-control-size`	`length`	Minimum interaction block size.	`2.75rem`
`--cui-slider-radius`	`length`	Rail and thumb rounding.	`999px`

Attributes

HTML attributes defined on the components that you can refer to for CSS, inspection, and testing. Read-only.

CSlider attributes

Attribute	Element	Type	Meaning
`data-disabled`	Root div	`present \| absent`	Mirrors effective disabledness.
`data-readonly`	Root div	`present \| absent`	Mirrors effective readonly state.
`data-invalid`	Root div	`present \| absent`	Mirrors effective invalid state.
`data-dragging`	Root div	`present \| absent`	Marks an active pointer gesture.
`data-orientation`	Root div	`CSliderOrientation` (`CSliderOrientation`)	Mirrors track orientation.
`data-variant`	Root div	`CSliderVariant` (`CSliderVariant`)	Mirrors visual treatment.
`data-size`	Root div	`CSliderSize` (`CSliderSize`)	Mirrors coordinated sizing.
`data-show-value`	Root div	`CSliderShowValue` (`CSliderShowValue`)	Mirrors value-bubble policy.

CSlider attributes

Attribute	Element	Type	Meaning
`role`	Enhanced thumb Button	`"slider"`	Exposes slider interaction semantics.
`aria-valuenow`	Enhanced thumb Button	`canonical decimal`	Exposes the exact current value.
`aria-valuetext`	Enhanced thumb Button	`localized string`	Exposes the locale-formatted current value.
`aria-valuemin`	Enhanced thumb Button	`canonical decimal`	Exposes the current inclusive lower bound.
`aria-valuemax`	Enhanced thumb Button	`canonical decimal`	Exposes the current inclusive upper bound.

Selectors

Selectors for the DOM nodes in the components that you can use for CSS, inspection, and testing.

CSlider selectors

Selector	Element	Purpose
`[data-citry-ui-part="slider"]`	CSlider root div	State reflections and root customization destination.
`[data-citry-ui-part="range-slider"]`	CRangeSlider root div	State reflections and root customization destination.
`[data-citry-ui-part="native-input"]`	Native range input	No-JavaScript fallback and enhanced Form transport.
`[data-citry-ui-part="control"]`	Enhanced control div	Pointer interaction surface.
`[data-citry-ui-part="track"]`	Track div	Positions fill marks and thumbs.
`[data-citry-ui-part="fill"]`	Fill span	Shows the selected value or interval.
`[data-citry-ui-part="mark"]`	Mark span	Shows a configured grid position.
`[data-citry-ui-part="mark-label"]`	Mark label span	Shows application-owned mark text.
`[data-citry-ui-part="thumb"]`	Enhanced slider Button	Keyboard focus target and draggable value owner.
`[data-citry-ui-part="value"]`	Value span	Shows the locale-formatted current value.

Interfaces

Aliases and data shapes referenced above.

Input type aliases

Interface	Definition
`CSliderExact`	`int \| Decimal \| str`
`CSliderOrientation`	`Literal["horizontal", "vertical"]`
`CSliderVariant`	`Literal["solid", "subtle"]`
`CSliderSize`	`Literal["sm", "md", "lg"]`
`CSliderShowValue`	`Literal["never", "interaction", "always"]`
`CSliderChangeSource`	`Literal["pointer", "keyboard", "reset"]`
`CSliderChangePhase`	`Literal["change", "end"]`
`CRangeSliderThumb`	`Literal["lower", "upper"]`
`CClassValue`	`str \| Mapping[str, bool] \| Sequence[CClassValue]`
`CStyleValue`	`str \| Mapping[str, object] \| Sequence[CStyleValue]`

`CSliderValueChangeDetail`

Field	Type	Default	Meaning
`value`	`canonical decimal string`	-	Requested exact value.
`previousValue`	`canonical decimal string`	-	Effective exact value before the interaction.
`controlled`	`boolean`	-	Whether client value owns state.
`source`	`CSliderChangeSource` (`CSliderChangeSource`)	-	Pointer keyboard or reset cause.
`sourceEvent`	`object \| null`	-	Native interaction event when one exists.
`phase`	`CSliderChangePhase` (`CSliderChangePhase`)	-	Live change or completed interaction.

`CRangeSliderValueChangeDetail`

Field	Type	Default	Meaning
`value`	`[canonical decimal string, canonical decimal string]`	-	Requested ordered exact pair.
`previousValue`	`[canonical decimal string, canonical decimal string]`	-	Effective ordered pair before the interaction.
`controlled`	`boolean`	-	Whether client value owns state.
`source`	`CSliderChangeSource` (`CSliderChangeSource`)	-	Pointer keyboard or reset cause.
`sourceEvent`	`object \| null`	-	Native interaction event when one exists.
`phase`	`CSliderChangePhase` (`CSliderChangePhase`)	-	Live change or completed interaction.
`activeThumb`	`CRangeSliderThumb` (`CRangeSliderThumb`)	-	Stable lower or upper thumb that requested the change.

Translation keys

Catalog keys used by this family. An explicit component input or slot listed in Override takes precedence over the catalog for that instance.

CRangeSlider translation keys

Key	Purpose	Variables	Override	Browser updates
`citry-ui-range-slider-lower`	Distinguishes the lower thumb and native fallback input.	`None`	`lower_label`	$c-tr updates the stable hidden label; both controls reference it.
`citry-ui-range-slider-upper`	Distinguishes the upper thumb and native fallback input.	`None`	`upper_label`	$c-tr updates the stable hidden label; both controls reference it.