HTMLInputElement of type
React Component
Our goal is to render <input type="range" /> with some additional tags added to it. Here is basic implementation.
import type { ChangeEvent } from 'react';
type Props = {
/** Provide an optional label to the range input */
label?: string;
/** Set a default value. Can be value for controlled mode */
defaultValue?: number;
/** Set a minimum available value in the range */
min?: number;
/** Set a maximum available value in the range */
max?: number;
/** Set a step increment/decrement amount */
step?: number;
/**
* Configure scale below range track
* Warning! See below
*/
scale?: { label: string; value: number }[];
/** Callback to capture changes */
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
/** Disable the input */
disabled?: boolean;
};
export const RangeInput: FC<Props> = ({
max = 100,
min = 0,
step,
defaultValue = 0,
onChange,
disabled
}) => {
const handleChange = useCallback(
(event: ChangeEvent<HTMLInputElement>) => {
onChange?.(event);
},
[onChange],
);
return (
<input
className={classes.input}
type="range"
value={value}
min={min}
max={max}
step={step}
onChange={handleChange}
disabled={disabled}
defaultValue={defaultValue}
/>
);
};
Styling input
All modern browsers allow us to style range input. But we still have to use vendor prefixes. -webkit-slider-runnable-track and -webkit-slider-thumb for Blink/WebKit; -moz-range-track and -moz-range-thumb for Mozilla based browsers.
We are going to use CSS variables to store information about design we choose.
.input {
--track-height: 4px;
--slider-size: 18px;
--track-color: plum;
--track-color-active: mediumPurple;
--thumb-color: seaGreen;
--thumb-color-active: chartreuse;
/* we need this to reset browser built-in styles */
all: unset;
}
Here is how to style the track of the input.
.input::-moz-range-track {
background: var(--track-color);
height: var(--track-height);
border-radius: 6px;
cursor: col-resize;
}
.input::-webkit-slider-thumb {
background: var(--track-color);
height: var(--track-height);
border-radius: 6px;
cursor: col-resize;
}
We have to repeat two times because stacking selectors (.input::-moz-range-track, .input::-webkit-slider-thumb) doesn't work in this case.
Here are thumb styles:
.input::-moz-range-thumb {
background-color: var(--thumb-color);
border: none;
cursor: grab;
height: var(--slider-size);
width: var(--slider-size);
}
.input::-webkit-slider-thumb {
/* same styles as above and additional to fix Chrome/Safari issues */
appearance: none;
border-radius: 50%;
margin-top: calc(var(--track-height) / 2 - var(--slider-size) / 2);
}
Now we need to style different input states.
/* Disable unwanted outline when focused */
.input:focus-visible {
outline: none;
}
/* Disabled state */
.input:disabled::-moz-range-thumb {
background-color: var(--disabled-color);
cursor: not-allowed;
}
.input:disabled::-webkit-slider-thumb {
/* same as above */
}
.input:disabled::-moz-range-track {
background: var(--disabled-color);
cursor: not-allowed;
}
.input:disabled::-webkit-slider-runnable-track {
/* same as above */
}
/* Hover state */
.input:hover::-moz-range-track {
background: var(--track-color-active);
}
.input:hover::-webkit-slider-runnable-track {
/* same as above */
}
/* Active state */
.input:active:not(:disabled)::-moz-range-thumb {
cursor: grabbing;
}
.input:active:not(:disabled)::-webkit-slider-thumb {
/* same as above */
}
.input:active:not(:disabled):focus::-moz-range-thumb{
background-color: var(--thumb-color-active);
}
.input:active:not(:disabled):focus::-webkit-slider-thumb {
/* same as above */
}
.input:active:not(:disabled):focus::-moz-range-track {
background: var(--track-color-active);
}
.input:active:not(:disabled):focus::-webkit-slider-runnable-track {
/* same as above */
}
Selectors explained
.input:active:not(:disabled):focus::-moz-range-thumb consists of:
.input- CSS class name.:active- CSS pseudo-class matching elements being interacted with.:not(:disabled)- CSS pseudo-class which represents elements that do not match provided list of selectors. Not disabled in this case.:focus- CSS pseudo-class matching element having browser focus.::-moz-range-thumb- CSS pseudo-element matching draggable thumb for Mozilla browsers.
Add input label and output
Now we are going to implement accessible clickable label and dynamic output element to show current value.
export const RangeInput: FC<Props> = ({
label,
max = 100,
min = 0,
step,
defaultValue = 0,
onChange,
disabled,
}) => {
// Create unique id
const id = useId();
/* The state is required to be able to display an input result */
const [value, setValue] = useState(defaultValue);
const handleChange = useCallback(
(event: ChangeEvent<HTMLInputElement>) => {
setValue(event.target.valueAsNumber);
onChange?.(event);
},
[onChange],
);
return (
<div className={classes.wrapper}>
{/* Conditionally render label element */}
{label && (
{/* We use input id to connect the label */}
<label htmlFor={id} className={classes.label}>
{label}
</label>
)}
<input
type="range"
id={id}
value={value}
min={min}
max={max}
step={step}
onChange={handleChange}
disabled={disabled}
/>
{/* We use input id to connect the output */}
<output name="result" htmlFor={id}>
{value}
</output>
</div>
);
};
Add scale
Warning: This feature is not supported by Safari browser!
Mozilla and Chromium-based browsers allow us to attach scale with tick marks into a range control with the help of <datalist> element. Each tick mark is represented by an <option>, where the value attribute corresponds to the specific range value at which the mark should appear.
type ScaleMark = {
/** Range value to attach mark to */
value: number;
/** Label to display at the provided mark */
label: string;
};
export type Props = {
//...
/** Provide an optional array of scale marks to display below range track */
scale?: ScaleMark[];
};
export const RangeInput: FC<Props> = ({
//...
scale,
}) => {
const id = useId();
// Derivative id for scale element
const scaleId = `${id}-scale`;
// ...
return (
<div className={classes.wrapper}>
{/*...*/}
<div className={classes.inputWrapper}>
<input
//...
// Here we provide scale element id
list={scale && scaleId}
/>
{/* Conditionally render scale element*/}
{scale && (
<datalist id={scaleId}>
{scale.map(({ label, value }) => (
<option key={value} value={value} label={label} />
))}
</datalist>
)}
</div>
{/*...*/}
</div>
);
};
Here are styles for scale:
.scale {
display: flex;
flex-direction: row;
/* Required to distribute marks */
justify-content: space-between;
width: 100%;
}
.scale option {
padding: 6px 0 0 0;
font-size: 16px;
user-select: none;
cursor: default;
}
Working demo
Here is working example of range input.
Happy coding!
SOCIAL SHARE CARD GENERATOR