Skip to main content

Range

The range component is a component that shows a range slider. It is used to select a value.

{
  "range": {
    "component": "range",
    "label": "From 1 to 100",
    "inline": true
  }
}

Options​

info

Each option can come from the store context by defining {from: "path.to.the.option"}.

step​

The step is the increment value of the slider. By default it's set to 1.

min​

The min is the minimum value of the slider. By default it's set to 0.

max​

The max is the maximum value of the slider. By default it's set to 100.

{
  "range": {
    "component": "range",
    "label": "From 10 to 40 by step 5",
    "inline": true,
    "rangeOptions": {
      "step": 5,
      "min": 10,
      "max": 40
    }
  }
}

showMin​

The showMin property is used to show the min value of the slider.

{
  "range": {
    "component": "range",
    "label": "From 10 to 40 by step 5",
    "inline": true,
    "rangeOptions": {
      "showMin": true
    }
  }
}

showMax​

The showMax property is used to show the max value of the slider.

{
  "range": {
    "component": "range",
    "label": "From 10 to 40 by step 5",
    "inline": true,
    "rangeOptions": {
      "showMax": true
    }
  }
}

thumbFormat​

The thumbFormat property is used to format the value of the thumb.

{
  "range": {
    "component": "range",
    "label": "From 10 to 40 by step 5",
    "inline": true,
    "rangeOptions": {
      "thumbFormat": "[* %]"
    }
  }
}

maxFormat​

The maxFormat property is used to format the value of the max.

{
  "range": {
    "component": "range",
    "label": "From 10 to 40 by step 5",
    "inline": true,
    "rangeOptions": {
      "maxFormat": "[* %]"
    }
  }
}

minFormat​

The minFormat property is used to format the value of the min.

{
  "range": {
    "component": "range",
    "label": "From 10 to 40 by step 5",
    "inline": true,
    "rangeOptions": {
      "minFormat": "[* %]"
    }
  }
}

valueInThumb​

The valueInThumb property is used to show the value of the thumb in the thumb.

{
  "range": {
    "component": "range",
    "label": "From 10 to 40 by step 5",
    "inline": true,
    "rangeOptions": {
      "valueInThumb": true
    }
  }
}

thumbStyle​

The thumbStyle property is used to set the style of the thumb.

ValueDescription
circleThe thumb is a circle
squareThe thumb is a square
{
  "range": {
    "component": "range",
    "label": "From 10 to 40 by step 5",
    "inline": true,
    "rangeOptions": {
      "thumbStyle": "circle"
    }
  }
}

thumbSize​

The thumbSize property is used to set the size of the thumb.

ValueDescription
smThe thumb is small
mdThe thumb is medium
lgThe thumb is large
{
  "range": {
    "component": "range",
    "label": "From 10 to 40 by step 5",
    "inline": true,
    "rangeOptions": {
      "thumbSize": "sm"
    }
  }
}

Storybook Examples​

Simple Range#

Simple Range Value From#

Range Options#

Range Options From#

Range Options To Zero#

Range With Validations#

Range With Default Value#

Disabled Range#

Multiple Range Options#

Range Show Min And Max#

Range Thumb Format#

Range Thumb Size#

Range Thumb Style#

Range Value In Thumb#