wmt-slider

This module is a React Slider component to be used in your applications.

Setting up the module

• git clone [e-mail]:wmtp/wmt-slider.git
• cd wmt-slider
• npm install

Building the module

The module uses Typescript compiler (TSC) to compile the source code. To build the project run the following command:

• npm run build

Installing the module for testing

You can install the module into your own React project as a dependency. After you clone the module you can install using the following command:

• npm install /absolute/path/to/wmt-slider
• i.e. -> npm install /Users/wmt/Documents/projects/npm/wmt-slider

Installing the module from npm

Use the following command to install from npm:

• npm install wmt-slider

Importing the module

Once you have the module installed you can import exported functions into your code like so:

import Slider from "wmt-slider";

Using the module

Example of using the module:

<Slider lowerTag={"Relaxed"} upperTag={"Anxious"} title="Anxiety"
value={this.state.anxietySlider} handleChange={this.handleAnxietyChange}
thumbColor={"#EC407A"} trackColor={"#FFCA28"} />

• lowerTag: The text that will appear on the left of the slider
• upperTag: The text that will appear on the right of the slider
• title: This prop is optional. It will place a title above the slider
• value: The current state of the slider
• handleChange: A handler function that is called when the slider value changes
• thumbColor: Optional, Override the circle color on the slider
• trackColor: Optional, Override the track color on the slider

Testing

• Tests can be ran with the npm test command.
• Tests are ran using Jest with Enzyme - More information about getting started with Jest can be found here.

Example render test:

it('renders without crashing', () => {
    shallow(<Slider />);
});`

Viewing API docs

You can generate and view the API docs by running the following command:

• npm run docs

This will start a development server on localhost:6060 showing all the properties for the Slider component.

You can also view the docs which are hosted here: https://wmtp.bitbucket.io/ReactModules/docs/#/WmtpSlider

Viewing source code

https://bitbucket.org/wmtp/wmt-slider

Published module

Here is where the module is currently published: https://www.npmjs.com/package/wmt-slider

License

This project is licensed under the MIT License.