[SOLVED] Ionic React - IonRange not showing up properly

Ionic Framework Ionic React
1

Hello,

I recently got started with Ionic React and I wanted to experiment with the IonRange component. The following is my IonRange code in JSX (alongside a button and some text):

      <IonApp>
            <IonContent>
                <IonGrid className="align-all-center">
                    <IonRow className="content-padding">
                        <IonButton onClick={updateName}>
                            Press Me!
                        </IonButton>
                    </IonRow>
                    <IonRow className="content-padding">
                        <IonText color="light">
                            Hello {name}!
                        </IonText>
                    </IonRow>
                    <IonRow>
                        <IonRange value={50} pin={true} min={0} max={100}></IonRange>
                    </IonRow>
                </IonGrid>
            </IonContent>
      </IonApp>

However, the result that I get in my browser is this:

image

When ever I try to scrub that dot, one of the values is:

image

Thanks for your help.

2

are you sure you imported all of the necessary component IonRange?

3

Yes, this is all the CSS that I imported from @ionic/react, just to make sure my IonRange would work, but to no avail:

import {
  IonApp,
  IonContent,
  IonButton,
  IonText,
  IonGrid,
  IonRow,
  IonRange,
} from "@ionic/react";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";
4

I just pasted the code into a react project and it works fine…

1 Like
5

Interesting, it had to do with my IonGrid and my IonRows. Because I tried the same thing without using those, and it worked. With those, the error occurs. Any ideas on why that could be happening?

6

i would have to see your entire project to understand why its not working but… clearly there is an issue with how you set your project up. Did you use one of the starter templates from the ionic-cli? I strongly suggest you start with one if you are new…

It works fine with the IonGrid in the sample I presented

7

Yes, sure. I did use .js instead of .tsx (but that probably isn’t the issue). Below is the link to my StackBlitz:

8

it is your css… remove all of the css and everything is working fine… when things dont work, go back to basics and then start added code… I believe you css is restricting the width of the IonRange component

            <IonRow style={{width:300}}>
              <IonRange value={50} pin={true} min={0} max={100} />
            </IonRow>
1 Like
9

Thanks, that was the solution. Seems like the row only expands to the actual width of the slider (the handle or “dot”), not the amount that the slider has. When I changed the width to “100%”, it filled the screen. Added that to my styles.css file now!