ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug: `IonRange` does not render dual knobs correctly when value is set initially

Open sean-perkins opened this issue 1 year ago • 2 comments


Ionic Framework Version

  • [ ] v4.x
  • [ ] v5.x
  • [X] v6.x
  • [ ] Nightly

Current Behavior

When IonRange initially renders with an initial value and dual knobs, the dual knobs will not display with their correct value position. This happens when either setting the value inline, against a variable reference or using useState.

If you cause a re-render of the component, the knobs will render correctly.

Expected Behavior

The dual knobs should render with the values assigned.

Steps to Reproduce

  1. Open reproduction URL
  2. Observe: Dual knobs are not displayed (both knobs are 0 position)
  3. Click "Cause Re-Render"
  4. Observe: The two range elements not bound to a state variable are rendered correctly

Code Reproduction URL

Ionic Info


Additional Information

No response

sean-perkins avatar Jun 10 '22 00:06 sean-perkins

Hi, loving the package so far.

Any update on this issue? Has anyone found a workaround?

I tried a hacky solution of manually emitting an event (in @ionic/react 6) using a ref, but no luck.


mepc36 avatar Aug 05 '22 00:08 mepc36

Since there's a special place in hell for devs who ask a question and then never post their answer (haha), here's mine:

Basically, add a button that you programmatically click post-render, and hide said button:

import React from 'react'
import { IonApp, IonContent, IonModal, IonRange, IonButton } from '@ionic/react'

export function MyComponent() {
  const [range, setRange] = useState({})
  const resetButtonRef = useRef()

  return (
          onDidPresent={() => {
            onIonChange={event => {
            style={{ display: 'none' }}
            onClick={() => {

mepc36 avatar Aug 09 '22 05:08 mepc36