Pre Slider

Installation

npm install --save pre-slider

For More Example

Live Demo

Usage

<Slider defaultValue={30}
         minLabel="0 °C"
         maxLabel="100 °C"
         unit="°C"
         onAfterChange={this.handleAfterChange}
         onChange={this.handleChange}/>

--- With Range ---

 <Slider range
                                    defaultValue={[40,90]}
                                    minValue={20}
                                    maxValue={120}
                                    onChange={this.handleChange}/>

Slider Props

Name	Type	Default	Required	Description
maxValue	number	100	false	Maximum value of Slider component.
minValue	number	0	false	Minimum value of Slider component.
defaultValue	number	-	false	Default value of Slider component (If has range prop defaultValue must array like {[0,100]}).
step	number	-	false	Increment or decrement range of values.
disabled	bool	false	false	Disables component.
range	bool	-	false	Range support for slider component.
onChange	func	-	false	Change event for the component.
onAfterChange	func	-	false	After Change event for the component.
closeLabel	bool	false	false	Close of min-max labels.
maxLabel	string	-	false	Label of maximum value.
minLabel	string	-	false	Label of minimum value.
unit	bool	" "	false	Unit of popover content.
closeTooltip	bool	false	false	Tooltip support for component.

Quick Start

1. Get the latest version

You can start by cloning the latest version of pre-slider.

2. Run npm install

This will install both run-time project dependencies and developer tools listed in package.json file.

3. How to start project in Development Mode

This will start the development server and serve site application.

$ npm start

Open Browser and enter http://localhost:3000 (default)

How to Build for Production

If you need just to build the app (without running a dev server), simply run:

$ npm run build

How to Build for Site

If you need just to build the app (without running a dev server), simply run:

$ npm run site