Material Bread
v0.2.10
Home
Getting Started
React Native
Web
Electron
MacOS
Windows
NextJs
Expo
Vue Native
Style
Font
Icons
Theme
Components
Appbar
Searchbar
Appbar Bottom
Avatar
Backdrop
Badge
Banner
Bottom Navigation
Bottom Navigation Item
Button
Card
CardActions
CardContent
CardHeader
CardMedia
Checkbox
Chip
DataTable
DataTableCell
DataTableHeader
DataTablePagination
DataTableRow
Dialog
Divider
Drawer
DrawerHeader
DrawerItem
DrawerSection
DrawerBottom
Fab
Speed dial
Icon
IconButton
List
ListExpand
ListItem
ListSection
Menu
MenuItem
Paper
Progress Bar
Progress Circle
Radio Button
Ripple
Select
SheetBottom
SheetSide
Slider
Snackbar
SwipeNav
Switch
Tabs
Tab
Textfield
Searchfield
ToggleButton
ToggleButtonGroup
Tooltip
Typography
Utils
Anchor
Color
Hoverable
Shadow
Storybook
Showcase
Contributing
Library
Docs
About

Slider

Sliders allow users to make selections from a range of values. - Material Docs

import { Slider } from 'material-bread';

Component #

A Slider can show with one marker or two markers. Two markers is called a Ranged slider.
Live Editing
class Sliders extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      slider: 40,
      sliderTwo: 20,
      sliderThree: 60
    }
  }
  render() {
    return (
      <View >
        <Slider
          values={[this.state.slider]}
          sliderLength={200}
          max={100}
          onValueChange={value => store.set({ slider: value })}
        />

        <Slider
          values={[this.state.sliderTwo]}
          sliderLength={200}
          max={100}
          disableOne={true}
          onValueChange={value => this.setState({ sliderTwo: value })}
        />

        <Slider
          values={[this.state.sliderThree]}
          sliderLength={200}
          max={100}
          onValueChange={value => this.setState({ sliderThree: value })}
          markerSize={16}
          trackHeight={8}
          trackStyle={{borderRadius: 99}}
        />
      </View>
    );
  }
}

Usage #

import React, { Component } from 'react';
import { Slider } from 'material-bread';

class Sliders extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      slider: 40,
      sliderTwo: 20
    }
  }
  render() {
    return (
      <View >
        <Slider
          values={[this.state.slider]}
          sliderLength={200}
          max={100}
          onValueChange={value => store.set({ slider: value })}
        />

        <Slider
          values={[this.state.sliderTwo]}
          sliderLength={200}
          max={100}
          disableOne={true}
          onValueChange={value => this.setState({ sliderTwo: value })}
        />
      </View>
    );
  }
}

Props #

Name
Description
Type
Default
allowOverlap
Allow overlap for markers
bool
false
disableOne
Disables marker on the left
bool
disableTwo
Disables marker on the right
bool
markerColor
Color of marker
string
theme.primary.main
markerSize
The size of the markers
number
12
max
Maximum number for the either marker
number
100
min
Minium number for the either marker
number
0
onValuesChange
Callback as values change
func
onValuesChangeEnd
Callback when letting go of marker
func
sliderLength
The defined width of the slider
number
280
step
Number that marker jumps to next value
number
1
style
Styles root element
object
trackColor
Color of track
string
theme.primary.main
backgroundTrackColor
Color of background track
string
#CECECE
trackHeight
The height of the track
number
2
trackStyle
Styles the track
object
values
Array of starting values for each marker
array

Demos #

You can see even more examples in the Storybook environment.

Ranged Sliders #

Live Editing
class Sliders extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      slider: 40,
      sliderTwo: 80
    }
  }
  render() {
    return (
      <View >
        <Slider
          values={[this.state.slider, this.state.sliderTwo]}
          sliderLength={200}
          max={100}
          onValueChange={value => store.set({ slider: value })}
        />

        <Slider
          values={[this.state.slider, this.state.sliderTwo]}
          sliderLength={200}
          max={100}
          disableOne={true}
          onValueChange={value => this.setState({ sliderTwo: value })}
        />

        <Slider
          values={[this.state.slider, this.state.sliderTwo]}
          sliderLength={200}
          max={100}
          disableOne={true}
          disableTwo={true}
          onValueChange={value => this.setState({ sliderTwo: value })}
        />
      </View>
    );
  }
}