• Web
  • Native


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


Simple slider

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

With many tooltips

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

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.


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
Made with ❤️ by Gympass • github