Slider

yarn add @clayui/slider

A Slider allows the user to select values in a linear range of values.

React Component
CSS / Markup

Range and Step
API

Slider is a controlled component and needs just 2 props for its basic use, value and onValueChange.

With Tooltip

import ClaySlider from '@clayui/slider';

import ClaySlider from '@clayui/slider';

const Component = () => {
  const [value, setValue] = useState(10);

  return (
    <div className="form-group">
      <label htmlFor="slider">{"With Tooltip"}</label>
      <ClaySlider id="slider" onValueChange={setValue} value={value} />
    </div>
  );
};

render(<Component />);

const Component = () => {
  const [value, setValue] = useState(10);
  return (
    <div className="form-group">
      <label htmlFor="slider">{"With Tooltip"}</label>
      <ClaySlider id="slider" onValueChange={setValue} value={value} />
    </div>
  );
};
render(<Component />);

Range and Step

For a more specific use case you can specify other props, like min and max to determine the range, and step to specify how much the value changes.

Decades

import ClaySlider from '@clayui/slider';

import ClaySlider from '@clayui/slider';

const Component = () => {
  const [decade, setDecade] = useState(10);

  return (
    <div className="form-group">
      <label htmlFor="decadeSlider">{"Decades"}</label>

      <ClaySlider
        id="decadeSlider"
        max={2020}
        onValueChange={setDecade}
        step={10}
        value={decade}
      />
    </div>
  );
};

render(<Component />);

const Component = () => {
  const [decade, setDecade] = useState(10);
  return (
    <div className="form-group">
      <label htmlFor="decadeSlider">{"Decades"}</label>
      <ClaySlider
        id="decadeSlider"
        max={2020}
        onValueChange={setDecade}
        step={10}
        value={decade}
      />
    </div>
  );
};
render(<Component />);

API

Property	Type	Required	Default	Description
disabled	boolean	false		Flag that will disable component features.
max	number	false	100	Sets maximum permitted value.
min	number	false	0	Sets minimum permitted value
onValueChange	(value: number) => void	true		Callback will always be called when the slider value changes.
showTooltip	boolean	false	true	Flag to show tooltip or not.
step	number	false	1	Sets stepping interval.
tooltipPosition	'top' \| 'bottom'	false	'top'	Set tooltip position.
value	number	true		Set the current value of the slider.

Input
Custom Slider
- Disabled
- Tooltip
- References
- Label

Input

Range

<div class="form-group">
	<label for="basicInputTypeRange">Range</label>
	<input class="form-control" id="basicInputTypeRange" type="range" />
</div>

Custom Slider

To create a custom slider is necessary to use JavaScript to manipulate the thumb, we hide the native thumb so it can be possible to add tooltip's that reflect the current range value.

Clay Range

<div class="form-group">
	<label for="clayRange1">Clay Range</label>
	<div class="clay-range">
		<div class="clay-range-input">
			<input
				class="form-control-range"
				id="clayRange1"
				min="0"
				max="100"
				step="1"
				type="range"
			/>
			<div class="clay-range-track"></div>
			<div class="clay-range-progress" style="width: 38.2121%;">
				<div class="clay-range-thumb"></div>
			</div>
		</div>
	</div>
</div>

Disabled

Clay Range Disabled

Clay Range Disabled with Label

<div class="form-group">
	<label class="disabled" for="clayRangeDisabled1">Clay Range Disabled</label>
	<div class="clay-range">
		<div class="clay-range-input">
			<input
				class="form-control-range"
				disabled=""
				id="clayRangeDisabled1"
				min="0"
				max="30"
				step="1"
				type="range"
			/>
			<div class="clay-range-track"></div>
			<div class="clay-range-progress" style="width: 50%;">
				<div class="clay-range-thumb"></div>
			</div>
		</div>
	</div>
</div>
<div class="form-group">
	<label class="disabled" for="clayRangeLabel0"
		>Clay Range Disabled with Label</label
	>
	<div class="clay-range disabled">
		<div class="input-group">
			<div class="input-group-item">
				<div class="clay-range-input">
					<input
						class="form-control-range"
						disabled=""
						id="clayRangeLabel0"
						min="0"
						max="100"
						step="1"
						type="range"
					/>
					<div class="clay-range-track"></div>
					<div class="clay-range-progress" style="width: 50%;">
						<div class="clay-range-thumb"></div>
					</div>
				</div>
			</div>
			<div class="input-group-item input-group-item-shrink">
				<div class="input-group-text">
					<span class="clay-range-value">50</span>
				</div>
			</div>
		</div>
	</div>
</div>

Clay Range with Tooltip on Top

Clay Range with Tooltip on Bottom

<div class="form-group">
	<label for="clayRangeTooltipTop1">Clay Range with Tooltip on Top</label>
	<div class="clay-range">
		<div class="clay-range-input">
			<input
				class="form-control-range"
				id="clayRangeTooltipTop1"
				min="0"
				max="100"
				step="1"
				type="range"
			/>
			<div class="clay-range-track"></div>
			<div class="clay-range-progress" style="width: 34.2831%;">
				<div class="clay-range-thumb">
					<div class="tooltip clay-tooltip-top" role="tooltip">
						<div class="tooltip-arrow"></div>
						<div class="tooltip-inner">
							<div class="clay-range-value">34</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="form-group">
	<label for="clayRangeTooltipBottom1"
		>Clay Range with Tooltip on Bottom</label
	>
	<div class="clay-range">
		<div class="clay-range-input">
			<input
				class="form-control-range"
				id="clayRangeTooltipBottom1"
				min="0"
				max="100"
				step="1"
				type="range"
			/>
			<div class="clay-range-track"></div>
			<div class="clay-range-progress" style="width: 54.9104%;">
				<div class="clay-range-thumb">
					<div class="tooltip clay-tooltip-bottom" role="tooltip">
						<div class="tooltip-arrow"></div>
						<div class="tooltip-inner">
							<div class="clay-range-value">55</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

References

You can add the values of min and max at the ends of the Slider to give clearer feedback to your users.

Clay Range with References

<div class="form-group">
	<label for="clayRangeReferences1">Clay Range with References</label>
	<div class="clay-range">
		<div class="clay-range-title">
			<span class="clay-range-value">30</span>
		</div>
		<div class="clay-range-input" data-label-min="25" data-label-max="35">
			<input
				class="form-control-range"
				id="clayRangeReferences1"
				min="25"
				max="35"
				step="0.01"
				type="range"
			/>
			<div class="clay-range-track"></div>
			<div class="clay-range-progress" style="width: 50%;">
				<div class="clay-range-thumb"></div>
			</div>
		</div>
	</div>
</div>

Label

Clay Range with Label

Clay Range with Label and Title

Clay Range with Label and Data Labels

Clay Range with Label, Title, and Data Labels

<div class="form-group">
	<label for="clayRangeLabel1">Clay Range with Label</label>
	<div class="clay-range">
		<div class="input-group">
			<div class="input-group-item">
				<div class="clay-range-input">
					<input
						class="form-control-range"
						id="clayRangeLabel1"
						min="0"
						max="100"
						step="1"
						type="range"
					/>
					<div class="clay-range-track"></div>
					<div class="clay-range-progress" style="width: 50%;">
						<div class="clay-range-thumb"></div>
					</div>
				</div>
			</div>
			<div class="input-group-item input-group-item-shrink">
				<div class="input-group-text">
					<span class="clay-range-value">50</span>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="form-group">
	<label for="clayRangeLabel2">Clay Range with Label and Title</label>
	<div class="clay-range clay-range-align-items-end">
		<div class="input-group">
			<div class="input-group-item">
				<div class="clay-range-title">
					<span class="clay-range-value">15</span>
				</div>
				<div class="clay-range-input">
					<input
						class="form-control-range"
						id="clayRangeLabel2"
						min="0"
						max="30"
						step="1"
						type="range"
					/>
					<div class="clay-range-track"></div>
					<div class="clay-range-progress" style="width: 50%;">
						<div class="clay-range-thumb"></div>
					</div>
				</div>
			</div>
			<div class="input-group-item input-group-item-shrink">
				<div class="input-group-text">
					<span class="clay-range-value">15</span>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="form-group">
	<label for="clayRangeLabel3">Clay Range with Label and Data Labels</label>
	<div class="clay-range clay-range-align-items-start">
		<div class="input-group">
			<div class="input-group-item">
				<div
					class="clay-range-input"
					data-label-min="0"
					data-label-max="30"
				>
					<input
						class="form-control-range"
						id="clayRangeLabel3"
						min="0"
						max="30"
						step="1"
						type="range"
					/>
					<div class="clay-range-track"></div>
					<div class="clay-range-progress" style="width: 50%;">
						<div class="clay-range-thumb"></div>
					</div>
				</div>
			</div>
			<div class="input-group-item input-group-item-shrink">
				<div class="input-group-text">
					<span class="clay-range-value">15</span>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="form-group">
	<label for="clayRangeLabel4"
		>Clay Range with Label, Title, and Data Labels</label
	>
	<div class="clay-range">
		<div class="input-group">
			<div class="input-group-item">
				<div class="clay-range-title">
					<span class="clay-range-value">15</span>
				</div>
				<div
					class="clay-range-input"
					data-label-min="0"
					data-label-max="30"
				>
					<input
						class="form-control-range"
						id="clayRangeLabel4"
						min="0"
						max="30"
						step="1"
						type="range"
					/>
					<div class="clay-range-track"></div>
					<div class="clay-range-progress" style="width: 50%;">
						<div class="clay-range-thumb"></div>
					</div>
				</div>
			</div>
			<div class="input-group-item input-group-item-shrink">
				<div class="input-group-text">
					<span class="clay-range-value">15</span>
				</div>
			</div>
		</div>
	</div>
</div>