Slider

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

install	yarn add @clayui/slider
version
use	`import Slider from '@clayui/slider';`

Table of Contents

Input
Custom Slider
Disabled
Tooltip
References
Label
Title

Input

Default Range

Snippet

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

Custom Slider

Add clay-range-progress-none to clay-range for a basic range input that works without JavaScript.

Clay Range Clay Range Progress None

Snippet

<div className="form-group">
  <label for="_3tkp5wh4m">Clay Range Clay Range Progress None</label>
  <div className="clay-range clay-range-progress-none">
    <div className="clay-range-input">
      <input
        className="form-control-range"
        id="_3tkp5wh4m"
        min="0"
        max="100"
        step="1"
        type="range"
      />
      <div className="clay-range-track"></div>
      <div className="clay-range-progress">
        <div className="clay-range-thumb"></div>
      </div>
    </div>
  </div>
</div>

This CSS Component requires JavaScript to manipulate the progress indicator. We hide the native input because there is no way to add a progress indicator to the native input in Firefox or Safari. A JavaScript snippet is included with this example if the React Component is not an option.

The attribute data-toggle="clay-css-range" is only required if using the JavaScript shown in this demo.

Clay Range

Snippet

<div className="form-group">
	<label for="clayRange1">Clay Range</label>
	<div className="clay-range" data-toggle="clay-css-range">
		<div className="clay-range-input">
			<input className="form-control-range" id="clayRange1" type="range" />
			<div className="clay-range-track"></div>
			<div className="clay-range-progress" style={{width: '38.2121%'}}>
				<div className="clay-range-thumb"></div>
			</div>
		</div>
	</div>
</div>
<script>
	// IE11 matches polyfill

	if (!Element.prototype.matches) {
		Element.prototype.matches =
			Element.prototype.msMatchesSelector ||
			Element.prototype.webkitMatchesSelector;
	}

	// IE11 closest polyfill

	if (!Element.prototype.closest) {
		Element.prototype.closest = function (selector) {
			var node = this;

			while (node.nodeType === 1) {
				if (node.matches(selector)) {
					return node;
				}

				node = node.parentNode;
			}

			return null;
		};
	}

	(function () {
		function calcProgressWidth(el) {
			var clayRange = el.closest('[data-toggle="clay-css-range"]');

			var min = el.getAttribute('min') || 0;
			var max = el.getAttribute('max') || 100;
			var step = el.getAttribute('step') || 1;

			var thumbWidth = parseInt(
				clayRange.querySelector(
					'.clay-range-progress .clay-range-thumb'
				).offsetWidth
			);
			var rangeWidth = parseInt(el.offsetWidth);

			var currentStep = (el.value - min) / step;
			var totalSteps = (max - min) / step;
			var progressWidth = (currentStep / totalSteps) * 100;

			var offsetWidth = progressWidth;
			var ratio =
				(((1 - progressWidth * 0.01) * (thumbWidth / 1.001)) /
					rangeWidth) *
				100;

			if (progressWidth !== 50) {
				offsetWidth =
					progressWidth - (thumbWidth / 2 / rangeWidth) * 100 + ratio;
			}

			return offsetWidth;
		}

		function clayRange(e) {
			var clayRangeInput = e.target.closest(
				'[data-toggle="clay-css-range"]'
			);

			if (clayRangeInput) {
				offsetWidth = calcProgressWidth(e.target);

				clayRangeInput.querySelector(
					'.clay-range-progress'
				).style.width = offsetWidth + '%';

				var currentVal = e.target.value;

				var title =
					clayRangeInput.querySelectorAll('.clay-range-value');

				for (var i = 0; i < title.length; i++) {
					title[i].innerHTML = currentVal;
				}
			}
		}

		document.addEventListener('input', clayRange);

		document.addEventListener('change', clayRange);
	})();
</script>

Disabled

Clay Range Disabled

Snippet

<div className="form-group">
	<label className="disabled" for="clayRangeDisabled1">Clay Range Disabled</label>
	<div className="clay-range" data-toggle="clay-css-range">
		<div className="clay-range-input">
			<input
				className="form-control-range"
				disabled=""
				id="clayRangeDisabled1"
				min="0"
				max="30"
				step="1"
				type="range"
			/>
			<div className="clay-range-track"></div>
			<div className="clay-range-progress" style={{width: '50%'}}>
				<div className="clay-range-thumb"></div>
			</div>
		</div>
	</div>
</div>

Clay Range Disabled with Label

Snippet

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

Clay Range with Tooltip on Top

Snippet

<div className="form-group">
	<label for="clayRangeTooltipTop1">Clay Range with Tooltip on Top</label>
	<div className="clay-range" data-toggle="clay-css-range">
		<div className="clay-range-input">
			<input
				className="form-control-range"
				id="clayRangeTooltipTop1"
				min="0"
				max="100"
				step="1"
				type="range"
			/>
			<div className="clay-range-track"></div>
			<div className="clay-range-progress" style={{width: '34.2831%'}}>
				<div className="clay-range-thumb">
					<div className="tooltip clay-tooltip-top" role="tooltip">
						<div className="tooltip-arrow"></div>
						<div className="tooltip-inner">
							<div className="clay-range-value">34</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Clay Range with Tooltip on Bottom

Snippet

<div className="form-group">
	<label for="clayRangeTooltipBottom1"
		>Clay Range with Tooltip on Bottom</label
	>
	<div className="clay-range" data-toggle="clay-css-range">
		<div className="clay-range-input">
			<input
				className="form-control-range"
				id="clayRangeTooltipBottom1"
				min="0"
				max="100"
				step="1"
				type="range"
			/>
			<div className="clay-range-track"></div>
			<div className="clay-range-progress" style={{width: '54.9104%'}}>
				<div className="clay-range-thumb">
					<div className="tooltip clay-tooltip-bottom" role="tooltip">
						<div className="tooltip-arrow"></div>
						<div className="tooltip-inner">
							<div className="clay-range-value">55</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

References

These are visual indicators placed at the beginning and end of Clay Range; use the attributes data-label-min="{value}" and data-label-max="{value}" on clay-range-input to display them.

Clay Range with References

Snippet

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

Label

Labels are visual indicators appended to the beginning or end of Clay Range. These are used to display the current position of Clay Range.

Clay Range with Label

Snippet

<div className="form-group">
	<label for="clayRangeLabel1">Clay Range with Label</label>
	<div className="clay-range" data-toggle="clay-css-range">
		<div className="input-group">
			<div className="input-group-item">
				<div className="clay-range-input">
					<input
						className="form-control-range"
						id="clayRangeLabel1"
						min="0"
						max="100"
						step="1"
						type="range"
					/>
					<div className="clay-range-track"></div>
					<div className="clay-range-progress" style={{width: '50%'}}>
						<div className="clay-range-thumb"></div>
					</div>
				</div>
			</div>
			<div className="input-group-item input-group-item-shrink">
				<div className="input-group-text">
					<span className="clay-range-value">50</span>
				</div>
			</div>
		</div>
	</div>
</div>

Clay Range with Label and Data Labels

Snippet

<div className="form-group">
	<label for="clayRangeLabel2">Clay Range with Label and Data Labels</label>
	<div
		className="clay-range clay-range-align-items-start"
		data-toggle="clay-css-range"
	>
		<div className="input-group">
			<div className="input-group-item">
				<div
					className="clay-range-input"
					data-label-min="0"
					data-label-max="30"
				>
					<input
						className="form-control-range"
						id="clayRangeLabel2"
						min="0"
						max="30"
						step="1"
						type="range"
					/>
					<div className="clay-range-track"></div>
					<div className="clay-range-progress" style={{width: '50%'}}>
						<div className="clay-range-thumb"></div>
					</div>
				</div>
			</div>
			<div className="input-group-item input-group-item-shrink">
				<div className="input-group-text">
					<span className="clay-range-value">15</span>
				</div>
			</div>
		</div>
	</div>
</div>

Title

Titles are visual indicators placed at the top of Clay Range. These are used to display the current position of Clay Range.

Clay Range with Title

Snippet

<div className="form-group">
	<label for="clayRangeTitle1">Clay Range with Title</label>
	<div
		className="clay-range clay-range-align-items-end"
		data-toggle="clay-css-range"
	>
		<div className="input-group">
			<div className="input-group-item">
				<div className="clay-range-title">
					<span className="clay-range-value">15</span>
				</div>
				<div className="clay-range-input">
					<input
						className="form-control-range"
						id="clayRangeTitle1"
						min="0"
						max="30"
						step="1"
						type="range"
					/>
					<div className="clay-range-track"></div>
					<div className="clay-range-progress" style={{width: '50%'}}>
						<div className="clay-range-thumb"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Clay Range with Title, Label and Data Labels

Snippet

<div className="form-group">
	<label for="clayRangeTitle2"
		>Clay Range with Title, Label and Data Labels</label
	>
	<div
		className="clay-range"
		data-toggle="clay-css-range"
		data-toggle="clay-css-range"
	>
		<div className="input-group">
			<div className="input-group-item">
				<div className="clay-range-title">
					<span className="clay-range-value">15</span>
				</div>
				<div
					className="clay-range-input"
					data-label-min="0"
					data-label-max="30"
				>
					<input
						className="form-control-range"
						id="clayRangeTitle2"
						min="0"
						max="30"
						step="1"
						type="range"
					/>
					<div className="clay-range-track"></div>
					<div className="clay-range-progress" style={{width: '50%'}}>
						<div className="clay-range-thumb"></div>
					</div>
				</div>
			</div>
			<div className="input-group-item input-group-item-shrink">
				<div className="input-group-text">
					<span className="clay-range-value">15</span>
				</div>
			</div>
		</div>
	</div>
</div>

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 9, 2025 at 6:15:38 AM

Table of Contents

Input
Custom Slider
Disabled
Tooltip
References
Label
Title