Range Slider React Component

Range Slider React Component

Range Slider React component represents Range Slider component.

Range Slider Components

There are following components included:

**Range** / **F7Range**

Range Slider Properties

Prop	Type	Default	Description
<Range> properties
init	boolean	true	Initializes Range Slider
value	number array string		Range Slider value, must be array in case of dual range slider
min	number string		Minimum value
max	number string		Maximum value
step	number string	1	Maximum value
label	boolean	false	Enables additional label around range slider knob
dual	boolean	false	Enables dual range slider
draggableBar	boolean	true	When enabled it is also possible to interact with range slider (change value) on range bar click and swipe.
formatLabel	function(value)		Method must return formatted range knob label text. As an argument it receives label value
disabled	boolean	false	Defines whether the range slider is disabled or not
id	string		Range slider element ID attribute
input	boolean	false	If enabled, then it will render `input type=”range”` element inside as well
inputId	string		Input element ID attribute

Range Slider Events

Event	Description
<Range> events
rangeChange	Event will be triggered when Range Slider value has been changed
rangeChanged	Event will be triggered on slider knob release after value change

Range Slider Methods

Event	Description
<Range> methods
.setValue(newValue)	Set new range slider value
.getValue()	Returns range slider value

Examples

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      priceMin: 200,
      priceMax: 400,
    }
  }
  render() {
    return (
      <Page>
        <Navbar title="Range Slider"></Navbar>
        <BlockTitle>Volume</BlockTitle>
        <List simpleList>
          <ListItem>
            <ListItemCell className="width-auto flex-shrink-0">
              <Icon ios="f7:volume_mute_fill" md="material:volume_mute"></Icon>
            </ListItemCell>
            <ListItemCell className="flex-shrink-3">
              <Range
                min={0}
                max={100}
                step={1}
                value={10}
              ></Range>
            </ListItemCell>
            <ListItemCell className="width-auto flex-shrink-0">
              <Icon ios="f7:volume_fill" md="material:volume_up"></Icon>
            </ListItemCell>
          </ListItem>
        </List>
        <BlockTitle>Brightness</BlockTitle>
        <List simpleList>
          <ListItem>
            <ListItemCell className="width-auto flex-shrink-0">
              <Icon ios="f7:circle" md="material:brightness_low"></Icon>
            </ListItemCell>
            <ListItemCell className="flex-shrink-3">
              <Range
                min={0}
                max={100}
                step={1}
                value={50}
                label={true}
                color="orange"
              ></Range>
            </ListItemCell>
            <ListItemCell className="width-auto flex-shrink-0">
              <Icon ios="f7:circle_half" md="material:brightness_high"></Icon>
            </ListItemCell>
          </ListItem>
        </List>
        <BlockTitle className="display-flex justify-content-space-between">Price Filter <span>${this.state.priceMin} - ${this.state.priceMax}</span></BlockTitle>
        <List simpleList>
          <ListItem>
            <ListItemCell className="width-auto flex-shrink-0">
              <Icon ios="f7:circle" md="material:brightness_low"></Icon>
            </ListItemCell>
            <ListItemCell className="flex-shrink-3">
              <Range
                min={0}
                max={500}
                step={1}
                value={[this.state.priceMin, this.state.priceMax]}
                label={true}
                dual={true}
                color="green"
                onRangeChange={this.onPriceChange.bind(this)}
              ></Range>
            </ListItemCell>
            <ListItemCell className="width-auto flex-shrink-0">
              <Icon ios="f7:circle_half" md="material:brightness_high"></Icon>
            </ListItemCell>
          </ListItem>
        </List>
      </Page>
    )
  }
  onPriceChange(values) {
    this.setState({
      priceMin: values[0],
      priceMax: values[1],
    });
  }
}