Version 0.40.0

UI Atoms

Form Range

Use Form Range react component first

⚠️ For better cross-browser compatibility prefer the react component.

Jump to FormRange react component

Form Range (default)

<div class="sui-a-form-range">
    <input type="range" min="0" max="100" value="25">
</div>

Form Range disabled

<div class="sui-a-form-range">
    <input type="range" min="0" max="100" value="25" disabled>
</div>

Form Range colors

<div class="sui-a-form-range as--primary">
    <input type="range" min="0" max="100" value="25">
</div>

<div class="sui-a-form-range as--success">
    <input type="range" min="0" max="100" value="25">
</div>

<div class="sui-a-form-range as--warning">
    <input type="range" min="0" max="100" value="25">
</div>

<div class="sui-a-form-range as--danger">
    <input type="range" min="0" max="100" value="25">
</div>

Form Range with labels

0
100
<div class="sui-a-form-range">
    <input type="range" min="0" max="100" value="25">
    <div class="sui-a-form-range__label as--before">0</div>
    <div class="sui-a-form-range__label as--after">100</div>
</div>

Form Range with Output label

4
<div class="sui-a-form-range as--warning">
    <input type="range" min="2" max="8" value="4">
    <div class="sui-a-form-range__value">4</div>
</div>

Form Range Complete

4 GO
2 GO
8 GO
<div class="sui-a-form-range as--primary">
    <input type="range" min="2" max="8" value="4">
    <div class="sui-a-form-range__value">4 <small> GO</small></div>
    <div class="sui-a-form-range__label as--before">2 <small> GO</small></div>
    <div class="sui-a-form-range__label as--after">8 <small> GO</small></div>
</div>

React

Name: saagie-ui/atoms/FormRange

Dependencies

React PropTypes

Example

Code Example

import React from 'react';
import { FormRange } from 'saagie-ui/react';

class FormRangeExample extends React.Component {
  state = {
    value1: 16,
    value2: 14,
    value3: 12,
    value4: 10,
    value5: 8,
    value6: 6,
    value7: 4,
  };

  render() {
    return (
      <div>
        <h2>Form range (default)</h2>
        <FormRange
          maxValue={20}
          minValue={0}
          value={this.state.value1}
          onChange={value => this.setState({ value1: value })}
        />
        <h2>Form range colors</h2>
        <FormRange
          maxValue={20}
          minValue={0}
          value={this.state.value2}
          onChange={value => this.setState({ value2: value })}
          isPrimary
        />
        <FormRange
          maxValue={20}
          minValue={0}
          value={this.state.value3}
          onChange={value => this.setState({ value3: value })}
          isSuccess
        />
        <FormRange
          maxValue={20}
          minValue={0}
          value={this.state.value4}
          onChange={value => this.setState({ value4: value })}
          isWarning
        />
        <FormRange
          maxValue={20}
          minValue={0}
          value={this.state.value5}
          onChange={value => this.setState({ value5: value })}
          isDanger
        />
        <h2>Form range format label</h2>
        <FormRange
          maxValue={20}
          minValue={0}
          formatLabel={value => `${value} GO`}
          value={this.state.value6}
          onChange={value => this.setState({ value6: value })}
        />
        <h2>Form range disabled</h2>
        <FormRange
          maxValue={20}
          minValue={0}
          value={this.state.value7}
          onChange={value => this.setState({ value7: value })}
          isDisabled
        />
      </div>
    );
  }
}

export default FormRangeExample;

Arguments

Params Type Details
className (optional) string custom CSS class names.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
isDanger (optional) bool True for as--danger behavior.
isDisabled (optional) bool True for disabled behavior.
isPrimary (optional) bool True for as--primary behavior.
isSuccess (optional) bool True for as--success behavior.
isWarning (optional) bool True for as--warning behavior.
⚠️⚠️⚠️
Element based on react-input-range@1.3.0 you can override with all related props and options.
⚠️⚠️⚠️