Ion Range in ionrow size

Ionic Framework Ionic React
1

Hello

I show an ionRange component inside an ionRow but the drawback I see is that it does not display complete. As can be seen in the attached image

IonRange

How I can I solve it?

                    <IonRow >
                        <IonItem>
                            <IonRange pin={true} value={value} onIonChange={e => setValue(e.detail.value as number)} />
                        </IonItem>
                    </IonRow >
                    <IonRow >
                        <IonItem>
                            <IonLabel>Value: {value}</IonLabel>
                        </IonItem>
                    </IonRow>

ion-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
ion-row{
    width:100%;

}

ion-col{
    width:100%;
    display: flex!important;
    align-content: center!important;
    align-items: center!important;
}