Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

slider

v1.10.0arrow_drop_down
STATUS
Passing
DOWNLOADS
21
VISIBILITY
Public
PUBLISHED
7 months ago
SIZE
21 KB
An input range slider lets the user specify a numeric value which must be between two specified values.
Install slider as a package?
Copied
npm i @bit/nexxtway.react-rainbow.slider
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
chevron_left
chevron_right
Slider Base
import React from 'react';
import { Slider } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

class SliderExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 50,
        };
        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({ value: e.target.value });
    }

    render() {
        const { value } = this.state;
        return (
            <div>
                <GlobalHeader src="images/user/user3.jpg" />
                <div
                    className="rainbow-m-vertical_xx-large rainbow-p-around_large rainbow-m_auto"
                    style={containerStyles}
                >
                    <Slider label="Slider label" value={value} onChange={this.onChange} />
                </div>
            </div>
        );
    }
}

<SliderExample />;
Slider with min, max and step properties
import React from 'react';
import { Slider } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

class SliderExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 200,
        };
        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({ value: e.target.value });
    }

    render() {
        const { value } = this.state;
        return (
            <div>
                <GlobalHeader src="images/user/user3.jpg" />
                <div
                    className="rainbow-m-vertical_xx-large rainbow-p-around_large rainbow-m_auto"
                    style={containerStyles}
                >
                    <Slider
                        label="Slider label"
                        min="100"
                        max="400"
                        step="50"
                        value={value}
                        onChange={this.onChange}
                    />
                </div>
            </div>
        );
    }
}

<SliderExample />;
Slider with error
import React from 'react';
import { Slider } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

class SliderExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 50,
        };
        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({ value: e.target.value });
    }

    render() {
        const { value } = this.state;
        return (
            <div>
                <GlobalHeader src="images/user/user3.jpg" />
                <div
                    className="rainbow-m-vertical_xx-large rainbow-p-around_large rainbow-m_auto"
                    style={containerStyles}
                >
                    <Slider
                        label="Slider label"
                        value={value}
                        onChange={this.onChange}
                        error="This field is required"
                    />
                </div>
            </div>
        );
    }
}

<SliderExample />;
Slider disabled
import React from 'react';
import { Slider } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

class SliderExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 50,
        };
        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({ value: e.target.value });
    }

    render() {
        const { value } = this.state;
        return (
            <div>
                <GlobalHeader src="images/user/user3.jpg" />
                <div
                    className="rainbow-m-vertical_xx-large rainbow-p-around_large rainbow-m_auto"
                    style={containerStyles}
                >
                    <Slider label="Slider label" value={value} onChange={this.onChange} disabled />
                </div>
            </div>
        );
    }
}

<SliderExample />;
Properties
NameTypeDefault valueDescription
label
string | nodenull

The text label for the slider. Provide your own label to describe the slider. Otherwise, no label is displayed.

hideLabel
boolfalse

A boolean to hide the slider label

value
string | numberundefined

The numerical value of the slider. This value defaults to 0.

name
stringundefined

The name of the Slider.

min
string | number0

The min value of the slider. This value defaults to 0.

max
string | number100

The max value of the slider. This value defaults to 100.

step
string | number1

The step increment value of the slider. Example steps include 0.1, 1, or 10. This value defaults to 1.

error
string | nodeundefined

Specifies that the slider element must have a value selected before submitting the form.

disabled
boolfalse

Specifies that the slider element should be disabled. This value defaults to false.

onChange
function() => {}

The action triggered when a value attribute changes.

onClick
function() => {}

The action triggered when the element is clicked.

onFocus
function() => {}

The action triggered when the element receives focus.

onBlur
function() => {}

The action triggered when the element releases focus.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectnull

An object with custom style applied to the outer element.