slider-button.md

SliderButton

Source

A linear set of buttons which are mutually exclusive.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { SliderButton } from 'chayns-components';

// ...

<SliderButton {...} />

Props

The SliderButton-component takes the following props:

Name	Type	Default	Required
className	string
style	{ [key: string]: string | number }
items	Array<{ id: string | number, text: string | ReactNode }>	[ { id: 0, text: 'Auf', }, { id: 1, text: 'Stopp', }, { id: 2, text: 'Zu', }, ]
onChange	function
onDragStop	function
onDragStart	function
selectedItemId	number	0
disabled	boolean	false

className

className?: string

A classname string that will be applied to the container element.

---

style

style?: { [key: string]: string | number }

A React style objec that will be applied to the container element.

---

items

items?: Array<{ id: string | number, text: string | ReactNode }>

An array of option items.

---

onChange

onChange?: function

A callback that is invoked when the selection changes.

---

onDragStop

onDragStop?: function

A callback that is invoked when the user starts dragging the control.

---

onDragStart

onDragStart?: function

A callback that is invoked when the user stops dragging.

---

selectedItemId

selectedItemId?: number

The id of the item that should be selected.

---

disabled

disabled?: boolean

Wether the SliderButton should ignore user interaction and be rendered in a disabled style.