Range
A range lets users choose an approximate value on a slider.
Default
The default form of a range.
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import Range from '@neoKit/range';
const RangeDefaultExample = () => {
return <Ranges step={1} min={1} max={100} ></Ranges>;
};
export default RangeDefaultExample;
Controlled
In a controlled range, the state is managed by the React component. Use the onChange handler to set the value.
The current value is: 20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import Range from '@neoKit/range';
const RangeControlledExample = () => {
const [value, setValue] = useState(50);
return (
<>
<Range step={1} value={value} onChange={(value) => setValue(value)} />
<p>The current value is: {value}</p>
</>
);
};
export default RangeControlledExample;Uncontrolled
In an uncontrolled range, the state is managed by the DOM.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import Range from '@neoKit/range';
const RangeUncontrolledExample = () => {
const [value, setValue] = useState(50);
return (
<>
<Ranges
step={1}
min={1}
max={100}
onChange={(value) => {}}
></Ranges>
</>
);
};
export default RangeUncontrolledExample;Disabled
Set isDisabled to disable a range when another action has to be completed before the range is usable.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import Range from '@neoKit/range';
const RangeDisabledExample = () => {
const [value, setValue] = useState(50);
return (
<>
<Range isDisabled step={1} min={1} max={100} />
</>
);
};
export default RangeDisabledExample;