How to make range input element reactive

const [step, setStep] = createSignal(0.01);

<div>
  <label for="step">Step</label>
  <input
    id="step"
    type="range"
    min={0.01}
    max={1.0}
    value={step()}
    onInput={(e) => {
      console.log(e.currentTarget.value);
      setStep(parseFloat(e.currentTarget.value));
    }}
  />
  {step()}
</div>

const [step, setStep] = createSignal(0.01);

<div>
  <label for="step">Step</label>
  <input
    id="step"
    type="range"
    min={0.01}
    max={1.0}
    value={step()}
    onInput={(e) => {
      console.log(e.currentTarget.value);
      setStep(parseFloat(e.currentTarget.value));
    }}
  />
  {step()}
</div>