Back to Polythene Slider main page

Slider component for React

• Options
• Usage
  • Ranges, steps and ticks
  • Reading and setting the slider value
• Appearance
  • Icons
  • Styling
    • Themed component
    • CSS
    • Style
  • Dark or light tone

Options

Slider options

Usage

A Slider with default settings (a range of 0 to 100, default value 0, step size 1):

import React from "react"
import { Slider } from "polythene-react"

<Slider />

Ranges, steps and ticks

Options to create a Slider with a range of 0 to 50 and a step size of 10 (step count of 6 including min and max), and a default value of 10:

{
  min: 0,
  max: 50,
  defaultValue: 10,
  stepSize: 10
}

To add tick marks and pins:

{
  min: 0,
  max: 50,
  defaultValue: 10,
  stepSize: 10,
  ticks: true,
  pin: true
}

Reading and setting the slider value

See also Handling state.

To read the Slider value, use onChange:

{
  onChange: ({ value }) => this.setState({ value })
}

To set the Slider value, use option value:

{
  onChange: ({ value }) => this.setState({ value })
  value: this.state.value
}

Appearance

Icons

To place an icon next to the Slider, use the option before:

import React from "react"
import { Slider, Icon, SVG } from "polythene-react"

const volumeIconSVG = <svg width="24" height="24" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>

<Slider
  before={
    <Icon><SVG>{volumeIconSVG}</SVG></Icon>
  }
/>

Styling

Below are examples how to change the Slider appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { SliderCSS } from "polythene-css"

SliderCSS.addStyle(".themed-slider", {
  color_light_track_active:   "#82b1ff",
  color_light_track_inactive: "#c5cae9",
  color_light_track_value:    "#f50057",
  color_light_thumb_on:       "#f50057"
})

<Slider className="themed-slider" />

CSS

Change CSS using the Slider CSS classes.

Class names can be imported with:

import classes from "polythene-css-classes/slider"

Style

Some style attributes can be set using option style. For example:

<Slider
  style={{
    color: "red"
  }}
/>

Dark or light tone

If the component - or a component's parent - has option tone set to "dark", the component will be rendered with light colors on dark.

• Use tone: "dark" to render light on dark
• Use tone: "light" to locally render normally when dark tone is set