<exm-slider>

@exmg/exm-slider

Material 3 styled slider with an editable value pill, built with Lit and @material/web. Next to the slider track a pill shows the current value; double clicking the pill opens a small input to type a new value directly.

Installation

bun add @exmg/exm-slider

Peer dependencies: lit, @exmg/lit-base, @material/web.

Example Usage

<script type="module">
  import '@exmg/exm-slider/exm-slider.js';
</script>

<exm-slider
  value="20"
  value-prefix="€"
  value-postfix=",00"
></exm-slider>

A compact variant:

<exm-slider small value="20"></exm-slider>

Editing the value

• Double click the value pill to open the manual input.
• Enter commits the typed value and closes the input, Escape closes it without committing.
• ArrowUp / ArrowDown change the value by one step, Shift + arrow keys by ten steps. Changes are clamped to min and max.
• While the slider is dragged, the pill value follows the slider position.

API

<exm-slider>

Properties/Attributes

| Name | Type | Default | Description | | ----------------------- | --------- | ------- | -------------------------------------------------------------------------- | | value | number | None | The current value. Updated while dragging the slider and while typing. | | min | number | 0 | Minimum value. | | max | number | 100 | Maximum value. | | step | number | 1 | Step size used by the slider track and the arrow keys. | | small | boolean | false | Renders the compact slider variant. | | valuePrefix | string | None | Text shown before the value in the pill. Attribute: value-prefix. | | valuePostfix | string | None | Text shown after the value in the pill. Attribute: value-postfix. |

Events

The component re-fires input and change events for all interactions: dragging the slider, typing in the value pill, and the Enter / Escape / arrow key handling in the pill input. The native events of the internal Material slider are stopped, so these are the events to listen for.

| Name | Detail | Description | | -------- | --------- | -------------------------------------------------------------------------------------------------- | | input | number | Fired while the value changes: dragging the slider, typing in the pill, arrow key presses. | | change | number | Fired when the value is committed: slider release (change on the slider), pill blur, Enter or Escape in the pill input. |

Both events are CustomEvents that do not bubble and are composed. The detail is the current numeric value.

<exm-slider value="20" onchange="console.log('change', event.detail)"></exm-slider>

CSS Custom Properties

The value pill uses the Material system color tokens. They can be overridden to theme the pill:

| Name | Description | | --------------------------------------- | ------------------------------------ | | --md-sys-color-on-surface-variant | Text color of the value pill. | | --md-sys-color-surface-container-high | Background color of the value pill. |

Testing

The package is tested with Vitest and jsdom. From the repository root:

bun run test

or scoped to this package:

cd packages/exm-slider
bun run test

The jsdom gaps (pointer capture, ElementInternals and ResizeObserver stubs) are provided by the shared test setup in packages/exm-color-picker/src/test-setup.ts.