Components

Slider

A number in a range, dragged, clicked or stepped by the keys.

tone
size
scheme

forSlots(SliderSlots)(Recipes.Slider({}))

Usage

The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.

export const SliderStyle = forSlots(SliderSlots)(Recipes.Slider({}))

/** The drag is the component's; the value is the Model's. */
export interface SliderState {
  readonly slider: UiSlider.Model
  readonly volume: number
}

export const slider = <Message>(
  style: NamedStyle<typeof SliderSlots>,
  state: SliderState,
  toMessage: (message: UiSlider.Message) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  h.submodel({
    slotId: state.slider.id,
    model: state.slider,
    view: UiSlider.view,
    viewInputs: {
      value: state.volume,
      ariaLabel: 'Volume',
      formatValue: (value: number) => `${Math.round(value)} percent`,
      toView: Slider.toView([style.mixin], { h }, slider =>
        h.div(slider.root, [
          h.label(slider.label, [`Volume: ${state.volume}%`]),
          h.div(slider.track, [h.div(slider.filledTrack, []), h.div(slider.thumb, [])]),
        ]),
      ),
    },
    toParentMessage: toMessage,
  })

The recipe ↗This code ↗