SolidJS•2mo ago

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

In range input, I set step={props.step}. but doesn't work correctly. When i try by declaring variable inside this file and use it, it works. I want to pass step from parent component as props. Thanks for any suggestions.

2 Replies

Maciek50322•2mo ago

Probably something incorrectly passed from parent component, here's working example, share yours with parent component if it still doesn't work. https://playground.solidjs.com/anonymous/e4d57fee-ae74-4194-96c2-ee8c23f58df3

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Zwel•2mo ago

Thanks for your help! Now I am okay with it. I mess with other stuffs so that error happens.

Gaming

Programming

Range input doesn't work correctly with props value