Mixins / foldkit-mixins-ui

SliderView

interface · packages/mixins-ui/src/slider.ts:84

interface SliderView<Message, Value extends number | Range> extends Bounds {
  readonly id: string
  readonly label: string
  readonly value: Value
  readonly onChange: (value: Value) => NoInfer<Message>
  readonly format?: ((value: number) => string) | undefined
  readonly thumbLabels?: Value extends Range
    ? | {
          readonly low: string
          readonly high: string
        }
      | undefined
    : never
  readonly marks?: ReadonlyArray<number | Mark> | undefined
  readonly ticks?: boolean | undefined
  readonly orientation?: 'horizontal' | 'vertical' | undefined
  readonly showValue?: boolean | undefined
  readonly name?: string | undefined
  readonly disabled?: boolean | undefined
  readonly style?: NamedStyle<typeof SliderSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Members

SliderView.id

property · packages/mixins-ui/src/slider.ts:86

readonly id: string

Prefixes the ids the slider draws, unique on the page.

SliderView.label

property · packages/mixins-ui/src/slider.ts:88

readonly label: string

What the slider chooses, shown and naming it.

SliderView.value

property · packages/mixins-ui/src/slider.ts:90

readonly value: Value

Within the bounds and on the step; a range's low at most its high.

SliderView.onChange

property · packages/mixins-ui/src/slider.ts:92

readonly onChange: (value: Value) => NoInfer<Message>

The Message for the next value; its type comes from h.

SliderView.format

property · packages/mixins-ui/src/slider.ts:94

readonly format?: ((value: number) => string) | undefined

How a value reads aloud, as each thumb's aria-valuetext, and as shown; default String.

SliderView.thumbLabels

property · packages/mixins-ui/src/slider.ts:96

readonly thumbLabels?: Value extends Range
  ? | {
        readonly low: string
        readonly high: string
      }
    | undefined
  : never

A range's thumb names; default Minimum and Maximum. One thumb is named by label.

SliderView.marks

property · packages/mixins-ui/src/slider.ts:103

readonly marks?: ReadonlyArray<number | Mark> | undefined

Values marked on the track, each drawn with data-filled when the fill covers it; a Mark also writes its label under the track.

SliderView.ticks

property · packages/mixins-ui/src/slider.ts:105

readonly ticks?: boolean | undefined

A dot at every step, as marks would draw each (data-tick); for a few steps, not hundreds.

SliderView.orientation

property · packages/mixins-ui/src/slider.ts:107

readonly orientation?: 'horizontal' | 'vertical' | undefined

Default horizontal. Vertical runs from the bottom up.

SliderView.showValue

property · packages/mixins-ui/src/slider.ts:109

readonly showValue?: boolean | undefined

Draws each thumb's value, formatted, beside it; the recipe's value axis places it.

SliderView.name

property · packages/mixins-ui/src/slider.ts:111

readonly name?: string | undefined

Submits the value under this name; a range submits both, low first.

SliderView.disabled

property · packages/mixins-ui/src/slider.ts:112

readonly disabled?: boolean | undefined

SliderView.style

property · packages/mixins-ui/src/slider.ts:114

readonly style?: NamedStyle<typeof SliderSlots> | undefined

A style of SliderSlots, for the look.

SliderView.mixins

property · packages/mixins-ui/src/slider.ts:116

readonly mixins?: MixinList<Message> | undefined

Mixins beside the style.