Sliders View Source



The Slider component is used to select from a range of numeric values.



Imports



Import React and the Slider Component.


0
import * as React from "react";
1
import { Slider } from "slate-react-system";


Slider



Discrete Slider

Continuous Slider

Declare the Slider component, specifying a min, max, and step. Declaring discrete true will yield a slider that snaps to each step.


0
class ExampleOne extends React.Component {
1
  state = {
2
    one: 0,
3
    two: 0,
4
  };
5
6
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
7
8
  render() {
9
    return (
10
      <div>
11
        <System.Slider
12
          discrete
13
          label="Discrete Slider"
14
          value={this.state.one}
15
          name="one"
16
          min={0}
17
          max={100}
18
          step={20}
19
          onChange={this._handleChange}
20
        />
21
        <System.Slider
22
          label="Continuous Slider"
23
          value={this.state.two}
24
          name="two"
25
          min={0}
26
          max={100}
27
          step={20}
28
          onChange={this._handleChange}
29
        />
30
      </div>
31
    );
32
  }
33
}



Slider with display



Slider with Input Box

Slider with Display Bubble
0

You can declare the Slider component with inputBox or bubble to include a display of the value. Values can be entered in the input box and the input box can be styled with inputStyle.


0
class ExampleTwo extends React.Component {
1
  state = {
2
    three: 9500,
3
    four: 0,
4
  };
5
6
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
7
8
  render() {
9
    return (
10
      <div>
11
        <System.Slider
12
          inputBox
13
          label="Slider with Input Box"
14
          min={9000}
15
          max={10000}
16
          step={100}
17
          value={this.state.one}
18
          name="three"
19
          onChange={this._handleChange}
20
          inputStyle={{ width: "60px" }}
21
        />
22
        <System.Slider
23
          bubble
24
          label="Slider with Display Bubble"
25
          min={-10}
26
          max={10}
27
          step={0.5}
28
          value={this.state.four}
29
          name="four"
30
          onChange={this._handleChange}
31
        />
32
      </div>
33
    );
34
  }
35
}



Accepted React Properties



Toggles
NameTypeDefaultDescription
onChange
function
null
Function called upon an onChange event
value
number
null
The value that the slider takes. Can be used to assign default values as well.
name
string
null
Slider name.
label
string
null
Label text.
description
string
null
Description text.
tooltip
string
null
Tooltip text.
min
number
0
Lower end of range
max
number
100
Higher end of range
step
number
1
Increments in which values can be selected.
discrete
boolean
false
If true, slider will snap to steps specified. Otherwise, slider is continuous
bubble
boolean
false
If true, a bubble floating above the handle will be displayed with the selected value.
inputBox
boolean
false
If true, an input box will be displayed with the selected value. The value can be edited using the input box.
inputStyle
Object
null
Style applied to the input box (useful for specifying width, etc).
containerStyle
Object
null
Style applied to the container holding the slider and input box (useful for specifying margin or height, etc).
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source