@licuido-ui/ui_slider NPM

Slider

Sliders allow users to make selections from a range of values.

Author

@author Henry Dyson J henry@crayond.co

Link

Story Book Link to Slider

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_slider

Import component

import { Slider } from '@licuido-ui/ui_slider';

Usage

<Slider value={40} thumbColor={'#665CD7'} size={12} />

Image

alt text

Sample Code

<Slider
  value={20}
  step={10}
  size={'medium'}
  sliderHeight={10}
  disableSwap={true}
  disabled={false}
  customMarks={true}
  progressLabel={true}
  valueLabelDisplay={'off'}
  labelColor={'green'}
  labelSize={18}
  sliderColor={'green'}
  thumbColor={''}
  onChange={() => false}
  sliderStyles={{}}
  symbol={'%'}
  labelStyle={{}}
  sliderThumbStyle={{}}
  marks={[]}
/>

Props

Name	Description	Default	Control
id	string	string	string
value	number	20	20
step	number	5	5
size	"small"	"medium"	"large"	small
sliderHeight	number	12	12
disabled	boolean	False	False
disableSwap	boolean	False	False
customMarks	boolean	False	False
progressLabel	boolean	False	False
valueLabelDisplay	"off"	"on"	off
labelColor	string	linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));	-
labelSize	number	16	16
sliderColor	string	linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));	-
thumbColor	string	linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));	-
onChange	()=>{}	-	-
sliderStyles	object	sliderStyles : {}	{}
symbol	char "$","%"	%	%
labelStyle	object	labelStyle : {}	{}
containerStyle	object	containerStyle : {}	{}
sliderThumbStyle	object	sliderThumbStyle : {}	{}
marks	Array of object	marks : 0 : {...} 2 keys1 : {...} 2 keys2 : {...} 2 keys3 : {...} 2 keys4 : {...} 2 keys5 : {...} 2 keys
sliderStyles	object	sliderStyles : {}	{}
symbol	char "$","%",..	%	%
labelStyle	object	labelStyle : {}	{}
containerStyle	object	containerStyle : {}	{}
sliderThumbStyle	object	sliderThumbStyle : {}	{}

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

0.0.2

8 months ago