Show Form Range value in UI Kit Issue Panel app

Forge Forge UI Kit and Custom UI
, , ,
1

According to the docs, there’s no attribute for the Range component to show it’s current value, how can I achieve that? Something like a label with the value number next to the range slider.

2

I am having the same problem. I need a slider for values from 1 to 100, but with no label you can only guess which value is selected. Is there a way to access the value of the slider to display it somewhere in the form?

3

Agreed, this would be a handy feature.

4

Hacky work-around:

const [levelValue, setLevelValue] = useState(0);

...

<Label labelFor={getFieldId("level")}><Text as="strong">Level ({levelValue})</Text></Label>
<Range 
    min={0} 
    max={1} 
    step={0.1} 
    {...register("level")}
    onChange={(value) => {
        setLevelValue(value);
        register("level").onChange(value);
    }}