Range input doesn't work correctly with props value

import { Component } from 'solid-js'

type RangeSliderProps = {
  minRange?: number
  maxRange?: number
  step?: number
  range: number
  onChange: (v: number) => void
}

const step = 0.01 // it works when i use this value directly in input

const RangeSlider: Component<RangeSliderProps> = props => {
  return (
      <input
        type="range"
        onInput={({ target }) => props.onChange(target.value)}
        value={props.range}
        min={props.minRange || 0}
        max={props.maxRange || 100}
        step={props.step}
        step={step}
      />
  )
}

export default RangeSlider

import { Component } from 'solid-js'

type RangeSliderProps = {
  minRange?: number
  maxRange?: number
  step?: number
  range: number
  onChange: (v: number) => void
}

const step = 0.01 // it works when i use this value directly in input

const RangeSlider: Component<RangeSliderProps> = props => {
  return (
      <input
        type="range"
        onInput={({ target }) => props.onChange(target.value)}
        value={props.range}
        min={props.minRange || 0}
        max={props.maxRange || 100}
        step={props.step}
        step={step}
      />
  )
}

export default RangeSlider