Slider

import { Slider } from 'cx/widgets';

The Slider widget allows selecting numerical values by dragging the slider handle. It supports single values, ranges, stepping, mouse wheel control, and vertical orientation.

 <div class="flex gap-8">
  <LabelsLeftLayout>
    <Slider
      label="Standard"
      value={bind(m.value, 50)}
      wheel
      valueTooltip={{ text: format(m.value, "n;0"), placement: "up" }}
    />
    <Slider label="Stepped" value={bind(m.stepped, 50)} step={10} wheel />
    <Slider label="Range" from={bind(m.from, 25)} to={bind(m.to, 75)} />
    <Slider label="Disabled" value={50} disabled />
  </LabelsLeftLayout>
  <Slider
    vertical
    from={bind(m.from, 25)}
    to={bind(m.to, 75)}
    rangeStyle="background: lightsteelblue"
  />
</div> 
 interface Model {
  value: number;
  stepped: number;
  from: number;
  to: number;
}

const m = createModel<Model>(); 
 import { createModel } from "cx/data";
import { bind, format, LabelsLeftLayout } from "cx/ui";
import { enableTooltips, Slider } from "cx/widgets";
enableTooltips(); 

Standard
Stepped
Range
Disabled

Configuration

Value Properties

Property	Type	Default	Description
`value`	`number`		Single value (alias for `to`)
`from`	`number`		Low value for range slider
`to`	`number`		High value for range slider
`minValue`	`number`	`0`	Minimum allowed value
`maxValue`	`number`	`100`	Maximum allowed value
`step`	`number`		Rounding step for discrete values

Behavior

Property	Type	Default	Description
`wheel`	`boolean`	`false`	Enable mouse wheel control (not with range sliders)
`increment`	`number`	1%	Value change per wheel tick
`disabled`	`boolean`	`false`	Disable the slider
`vertical`	`boolean`	`false`	Orient the slider vertically
`invert`	`boolean`	`false`	Invert vertical slider (top to bottom)

Appearance

Property	Type	Description
`handleStyle`	`string/object`	CSS style for the slider handle
`rangeStyle`	`string/object`	CSS style for the selected range

Tooltips

Property	Type	Description
`valueTooltip`	`string/object`	Tooltip config for the value handle
`fromTooltip`	`string/object`	Tooltip config for the `from` handle
`toTooltip`	`string/object`	Tooltip config for the `to` handle