There's basically 2 questions here:
## Should you use a range input without allowing user interaction?
In most cases it's indeed best to use a disabled range input, as it still already has the right behavior and appearance.
At least from a technical point of view. For the UX is might be frustrating that a user sees a very user friendly component but can't use it and needs to type in a number field instead. But at least if you use a range input it's a small change to make it actually usable.
## How to show a range input with a "allowed sub range"
This can be useful regardless of whether the user can control the range input. It's relatively easy to achieve by doing some calculations on the input to render a square behind the input element.
Here's an example, though there could be some work left to adapt it to any CSS that happens to be on the same page, so that you can be sure the numbers line up correctly with the square.
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const {Fragment, useState} = React;
function HighlightedSubrange({number, min, max, minAllowed, maxAllowed, disabled, onChange}) {
const length = max - min;
const left = `${100 * (minAllowed - min) / length}%`;
const right = `${100 * (max - maxAllowed) / length}%`;
const value = number;
return <div style={{position: 'relative', paddingTop: '4px', height: '24px', width: '320px'}}>
<input
type="range"
{...{min, max, onChange}}
value={value}
disabled={disabled}
style={{
position: 'relative',
zIndex: 4,
width: '100%',
margin: '0',
}}
/>
<div
style={{
zIndex: 3,
background: 'hsl(148deg 56% 84%)',
position: 'absolute',
top: 0,
bottom: 0,
left,
right,
}}
/>
</div>
}
function App() {
const [min, setMin] = useState(0);
const [minAllowed, setMinAllowed] = useState(50);
const [maxAllowed, setMaxAllowed] = useState(80);
const [max, setMax] = useState(100);
const [disabled, setDisabled] = useState(true);
const [number, setNumber] = React.useState(75);
return <Fragment>
<input
type="number"
min={0}
max={100}
value={number}
onChange={e=>setNumber(e.target.value)}
/>
<HighlightedSubrange
{...{number, min, max, minAllowed, maxAllowed, disabled}}
onChange={e=>setNumber(e.target.value)}
/>
<div style={{background: 'lightgrey', padding: '8px'}}>
<h3>Props</h3>
<div style={{display: 'flex'}}>
min<input
type="number"
value={min}
onChange={e=>setMin(e.target.value)}
/>
minAllowed<input
type="number"
min={min}
max={maxAllowed}
value={minAllowed}
onChange={e=>setMinAllowed(e.target.value)}
/>
maxAllowed<input
type="number"
min={minAllowed}
max={max}
value={maxAllowed}
onChange={e=>setMaxAllowed(e.target.value)}
/>
max<input
type="number"
value={max}
onChange={e=>setMax(e.target.value)}
/>
<label>
<input type="checkbox" checked={disabled} onClick={e=>setDisabled(!disabled)} readOnly/>disabled
</label>
</div>
</div>
</Fragment>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
<!-- language: lang-css -->
input[type="number"] {
max-width: 40px;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<!-- end snippet -->
That's [*property spread notation*][1]. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "[JSX spread attributes][2]" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" enumerable properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);
<!-- language: lang-css -->
.first {
color: green;
}
.second {
color: blue;
}
<!-- language: lang-html -->
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
<!-- language: lang-css -->
.as-console-wrapper {
max-height: 100% !important;
}
<!-- end snippet -->
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
[2]: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes
