WordPress.org

RangeControl Edit

RangeControl component is used to create range slider to input numerical values.

Usage Usage

Render a user interface to select the number of columns between 2 and 10.

import { RangeControl } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const MyRangeControl = withState( {
    columns: 2,
} )( ( { columns, setState } ) => ( 
    <RangeControl
        label="Columns"
        value={ columns }
        onChange={ ( columns ) => setState( { columns } ) }
        min={ 2 }
        max={ 10 }
    />
) );

Top ↑

Props Props

The set of props accepted by the component will be specified below.
Props not included in this set will be applied to the input elements.

label label

If this property is added, a label will be generated using label property as the content.

  • Type: String
  • Required: No

Top ↑

help help

If this property is added, a help text will be generated using help property as the content.

  • Type: String
  • Required: No

Top ↑

beforeIcon beforeIcon

If this property is added, a DashIcon component will be rendered before the slider with the icon equal to beforeIcon

  • Type: String
  • Required: No

Top ↑

afterIcon afterIcon

If this property is added, a DashIcon component will be rendered after the slider with the icon equal to afterIcon

  • Type: String
  • Required: No

Top ↑

allowReset allowReset

If this property is true, a button to reset the the slider is rendered.

  • Type: Boolean
  • Required: No

Top ↑

initialPosition initialPosition

If no value exists this prop contains the slider starting position.

  • Type: Number
  • Required: No

Top ↑

value value

The current value of the range slider.

  • Type: Number
  • Required: Yes

Top ↑

onChange onChange

A function that receives the new value.
If allowReset is true, when onChange is called without any parameter passed it should reset the value.

  • Type: function
  • Required: Yes
Skip to toolbar