<Range> Component

orientation Property

Sets the orientation of the <Range>.

The possible values are:

• undefined
• 'inline'
• 'block'

Here the preview:

size Property

Defines the alternative size of the <Range>.

The possible values are:

• undefined
• 'sm'
• 'md'
• 'lg'

Here the preview:

theme Property

Defines the contextual theme of the <Range>.

The possible values are:

• undefined
• 'primary'
• 'secondary'
• 'success'
• 'info'
• 'warning'
• 'danger'
• 'light'
• 'dark'

Here the preview:

gradient Property

Activates a 3D mode of the <Range>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Range>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Range>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

nude Property

Activates an nude mode (background-less, padding-less, and border-less) of the <Range>.

The possible values are:

• undefined
• true
• false

Here the preview:

enabled Property

Defines the enabled/disabled state of the <Range>.

The possible values are:

• undefined
• true
• false

Here the preview:

inheritEnabled Property

Influences the <Range>'s disabled state by <ancestor enabled={false}>.

The possible values are:

• undefined
• true
• false

Here the preview:

readOnly Property

Defines the readOnly/mutable state of the <Range>.

The possible values are:

• undefined
• true
• false

inheritReadOnly Property

Influences the <Range>'s readOnly by <ancestor readOnly={true}>.

The possible values are:

• undefined
• true
• false

enableValidation Property

Activates the valid/invalid indicator of the <Range>.

The possible values are:

• undefined
• true
• false

isValid Property

Marks the validity status of the <Range>.

The possible values are:

• undefined
• null
• true
• false

Here the preview:

inheritValidation Property

Influences the <Range>'s valid/invalid indicator by <ancestor isValid={true|false} enableValidation={true}>.

The possible values are:

• undefined
• true
• false

trackComponent Property

Overwrites the internal <EditableControl> component used as the main track of <Range> component.

trackLowerComponent Property

Overwrites the internal <Generic> component used as the lower track of <Range> component.

trackUpperComponent Property

Overwrites the internal <Generic> component used as the upper track of <Range> component.

thumbComponent Property

Overwrites the internal <EditableActionControl> component used as the thumb of <Range> component.

trackRef Property

Gets the DOM reference of the internal <EditableControl> component used as the main track of <Range> component.

<Range trackRef={fooTrackRef} />

<Range trackComponent={
    <EditableControl elmRef={fooTrackRef} />
} />

trackLowerRef Property

Gets the DOM reference of the internal <Generic> component used as the lower track of <Range> component.

<Range trackLowerRef={fooTrackLowerRef} />

<Range trackLowerComponent={
    <Generic elmRef={fooTrackLowerRef} />
} />

trackUpperRef Property

Gets the DOM reference of the internal <Generic> component used as the upper track of <Range> component.

<Range trackUpperRef={fooTrackUpperRef} />

<Range trackUpperComponent={
    <Generic elmRef={fooTrackUpperRef} />
} />

thumbRef Property

Gets the DOM reference of the internal <EditableActionControl> component used as the thumb of <Range> component.

<Range thumbRef={fooThumbRef} />

<Range thumbComponent={
    <EditableActionControl elmRef={fooThumbRef} />
} />

trackClasses Property

Appends the CSS class of the internal <EditableControl> component used as the main track of <Range> component.

<Range trackClasses={['boo', 'foo']} />

<Range trackComponent={
    <EditableControl classes={['boo', 'foo']} />
} />

trackLowerClasses Property

Appends the CSS class of the internal <Generic> component used as the lower track of <Range> component.

<Range trackLowerClasses={['boo', 'foo']} />

<Range trackLowerComponent={
    <Generic classes={['boo', 'foo']} />
} />

trackUpperClasses Property

Appends the CSS class of the internal <Generic> component used as the upper track of <Range> component.

<Range trackUpperClasses={['boo', 'foo']} />

<Range trackUpperComponent={
    <Generic classes={['boo', 'foo']} />
} />

thumbClasses Property

Appends the CSS class of the internal <EditableActionControl> component used as the thumb of <Range> component.

<Range thumbClasses={['boo', 'foo']} />

<Range thumbComponent={
    <EditableActionControl classes={['boo', 'foo']} />
} />

trackStyle Property

Appends the inline CSS of the internal <EditableControl> component used as the main track of <Range> component.

<Range trackStyle={{ opacity: 0.5, cursor: 'pointer' }} />

<Range trackComponent={
    <EditableControl style={{ opacity: 0.5, cursor: 'pointer' }} />
} />

trackLowerStyle Property

Appends the inline CSS of the internal <Generic> component used as the lower track of <Range> component.

<Range trackLowerStyle={{ opacity: 0.5, cursor: 'pointer' }} />

<Range trackLowerComponent={
    <Generic style={{ opacity: 0.5, cursor: 'pointer' }} />
} />

trackUpperStyle Property

Appends the inline CSS of the internal <Generic> component used as the upper track of <Range> component.

<Range trackUpperStyle={{ opacity: 0.5, cursor: 'pointer' }} />

<Range trackUpperComponent={
    <Generic style={{ opacity: 0.5, cursor: 'pointer' }} />
} />

thumbStyle Property

Appends the inline CSS of the internal <EditableActionControl> component used as the thumb of <Range> component.

<Range thumbStyle={{ opacity: 0.5, cursor: 'pointer' }} />

<Range thumbComponent={
    <EditableActionControl style={{ opacity: 0.5, cursor: 'pointer' }} />
} />