Slider

The slider component is powered behind the scenes by the NoUiSlider library.

Basic Slider

You can create basic sliders using the Slider component.

import React from "react";
import { Slider } from "shards-react";

export default function BasicSliderExample() {
  return (
    <Slider connect={[true, false]} start={[20]} range={{ min: 0, max: 100 }} />
  );
}

Custom Range

You can provide a custom range for the slider using the range prop.

Value: 1300

import React from "react";
import { Slider } from "shards-react";

export default class SliderCustomRange extends React.Component {
  constructor(props) {
    super(props);
    this.handleSlide = this.handleSlide.bind(this);
    this.state = { value: 1300 };
  }

  handleSlide(e) {
    this.setState({
      value: parseFloat(e[0])
    });
  }

  render() {
    return (
      <div>
        <p>Value: {this.state.value}</p>
        <Slider
          onSlide={this.handleSlide}
          connect={[true, false]}
          start={[this.state.value]}
          range={{ min: 0, max: 2500 }}
        />
      </div>
    );
  }
}

Slider Themes

Adjusting the theme color of the slider can be achieved via the theme prop.

import React from "react";
import { Slider } from "shards-react";

export default function BasicSliderExample() {
  return (
    <Slider
      theme="success"
      connect={[true, false]}
      start={[50]}
      range={{ min: 0, max: 100 }}
    />
  );
}

Custom Range

You can provide a custom range for the slider using the range prop.

Value: 1300

import React from "react";
import { Slider } from "shards-react";

export default class SliderCustomRange extends React.Component {
  constructor(props) {
    super(props);
    this.handleSlide = this.handleSlide.bind(this);
    this.state = { value: 1300 };
  }

  handleSlide(e) {
    this.setState({
      value: parseFloat(e[0])
    });
  }

  render() {
    return (
      <div>
        <p>Value: {this.state.value}</p>
        <Slider
          onSlide={this.handleSlide}
          connect={[true, false]}
          start={[this.state.value]}
          range={{ min: 0, max: 2500 }}
        />
      </div>
    );
  }
}

Multiple Values

If you'd like to control multiple values, you can use an Array for the start prop.

Value: [20,80]

import React from "react";
import { Slider } from "shards-react";

export default class SliderCustomRange extends React.Component {
  constructor(props) {
    super(props);
    this.handleSlide = this.handleSlide.bind(this);
    this.state = { value: [20, 80] };
  }

  handleSlide(e) {
    this.setState({
      value: [parseFloat(e[0]), parseFloat(e[1])]
    });
  }

  render() {
    return (
      <div>
        <p>Value: {JSON.stringify(this.state.value)}</p>
        <Slider
          connect
          onSlide={this.handleSlide}
          start={this.state.value}
          range={{ min: 0, max: 100 }}
        />
      </div>
    );
  }
}

Multiple Values

If you'd like to control multiple values, you can use an Array for the start prop.

Value: [20,80]

import React from "react";
import { Slider } from "shards-react";

export default class SliderCustomRange extends React.Component {
  constructor(props) {
    super(props);
    this.handleSlide = this.handleSlide.bind(this);
    this.state = { value: [20, 80] };
  }

  handleSlide(e) {
    this.setState({
      value: [parseFloat(e[0]), parseFloat(e[1])]
    });
  }

  render() {
    return (
      <div>
        <p>Value: {JSON.stringify(this.state.value)}</p>
        <Slider
          connect
          onSlide={this.handleSlide}
          start={this.state.value}
          range={{ min: 0, max: 100 }}
        />
      </div>
    );
  }
}

Using Pips

Pips can also be enabled using the pips prop.

Value: [20,80]

import React from "react";
import { Slider } from "shards-react";

export default class SliderCustomRange extends React.Component {
  constructor(props) {
    super(props);
    this.handleSlide = this.handleSlide.bind(this);
    this.state = { value: [20, 80] };
  }

  handleSlide(e) {
    this.setState({
      value: [parseFloat(e[0]), parseFloat(e[1])]
    });
  }

  render() {
    return (
      <div>
        <p>Value: {JSON.stringify(this.state.value)}</p>
        <Slider
          connect
          pips={{ mode: "steps", stepped: true, density: 3 }}
          onSlide={this.handleSlide}
          start={this.state.value}
          range={{ min: 0, max: 100 }}
        />
      </div>
    );
  }
}

Using Pips

Pips can also be enabled using the pips prop.

Value: [20,80]

import React from "react";
import { Slider } from "shards-react";

export default class SliderCustomRange extends React.Component {
  constructor(props) {
    super(props);
    this.handleSlide = this.handleSlide.bind(this);
    this.state = { value: [20, 80] };
  }

  handleSlide(e) {
    this.setState({
      value: [parseFloat(e[0]), parseFloat(e[1])]
    });
  }

  render() {
    return (
      <div>
        <p>Value: {JSON.stringify(this.state.value)}</p>
        <Slider
          connect
          pips={{ mode: "steps", stepped: true, density: 3 }}
          onSlide={this.handleSlide}
          start={this.state.value}
          range={{ min: 0, max: 100 }}
        />
      </div>
    );
  }
}

Props

The following props are available for the Slider component.

Prop	Description	Type	Default	Required
className	-	`String`	-	No
theme	-	`String`	-	No
animate	-	`Bool`	-	No
behaviour	-	`String`	-	No
cssPrefix	-	`String`	-	No
disabled	-	`Bool`	-	No
limit	-	`Number`	-	No
margin	-	`Number`	-	No
onChange	-	`Func`	-	No
onEnd	-	`Func`	-	No
onSet	-	`Func`	-	No
onSlide	-	`Func`	-	No
onStart	-	`Func`	-	No
onUpdate	-	`Func`	-	No
pips	-	`Object`	-	No
range	-	`Object`	-	Yes
start	-	`ArrayOf`	-	Yes
step	-	`Number`	-	No
direction	-	`Enum`	-	No
orientation	-	`Enum`	-	No
connect	-	`Array[Bool]Bool`	-	No
tooltips	-	`BoolArray[Shape]`	-	No