Slider

An input where the user selects a value from within a given range.

Usage

Import the component. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
 
const { Slider } = VM.require("uiisnear.near/widget/slider");
 
if (Tailwind == undefined) return "";

<Tailwind>
  <Slider defaultValue={[33]} max={100} step={1} />
</Tailwind>

API Reference

Slider

Contains all the parts of a slider. It will render an input for each thumb when used within a form to ensure events propagate correctly.

Prop	Type	Default
defaultValue	number[]	---
value	number[]	---
onValueChange	function	---
onValueCommit	function	---
name	string	---
disabled	boolean	false
orientation	enum	"horizontal
dir	enum	---
inverted	boolean	false
min	number	0
max	number	100
step	number	1
minStepsBetweenThumbs	number	0

Classnames

Classnames available to customize the component.

Function	Classname
Slider	sliderClassname

Examples

Vertical orientation

Skeleton Switch