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'; |
Input
<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.
<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.
<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
<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>
50
<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>
Tooltip
34
<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>
55
<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.
30
<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.
50
<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>
15
<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.
15
<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>
15
15
<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>
Table of Contents