Slider

  • Web
  • Native

Reference

Gympass <Slider /> component extends from rc-slider.

Usage

Simple slider

010
import { Slider } from '@gympass/yoga';

Working slider

Check this component on Github.

07

Showing a tooltip

Is possible to render a tooltip over the marks of slider, to do that you need to pass the tooltip prop. It's takes an array of objects that accepts the current shape:

  • ribbon: string
  • title: string
  • description: string
  • visible: bool (condition that controls tooltip visibility)
  • step: number (a specific step to show the tooltip)

With this array of objects you can render different tooltips, with different messages for each respective step you like.

Props

PropDescriptionTypeDefaultRequired
maxset the max valuenumber10false
maxLabellabel to be displayed at max valueunionundefinedfalse
minset the min valuenumber0false
minLabellabel to be displayed at min valueunionundefinedfalse
snappedmake slider be snap through dotsboolfalsefalse
tooltipaccepts a shape with 'ribbon', 'title', 'description', 'visible' and 'step' propertiesarrayOf[]false
valuesan array that accepts one or two numbers, this determines how many markers will be displayedarrayOf[0]false