Wish there was more details about styling!

[ghost]

I tried to change the style but the documentation was really complicated,

[PedroNunezCode]

@Omid-Incarnation Hey, did you succeed?

[ghost]

Hi and Thanks for replying. Honetly no I wasn't successful to add my own style, but I copied the default style from the modules and in the different CSS file I modified it by myself. You have a really good prepared input range hope you work more on documentation so web developer like me who are beginner can use it easily. With all the best Omid.

…

On Tue, May 28, 2019 at 9:33 AM Pedro Nunez ***@***.***> wrote: @Omid-Incarnation <https://github.com/Omid-Incarnation> Hey, did you succeed? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#154?email_source=notifications&email_token=AKEVVFVMCOSBOL62AJ3SBXDPXTN4VA5CNFSM4HPK7COKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWLHMOI#issuecomment-496399929>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKEVVFREIYEGQCIPPTATDB3PXTN4VANCNFSM4HPK7COA> .

[arhoy]

Can anyone here tell me how to style the value of the input range. I need to make the font bigger and give it some padding/margin

[nodes777]

For others who find themselves with this issue; there is a prop classNames that lets you overwrite the default CSS classes:

Replace the default classnames with the styles you want. We're using css modules below:

<InputRange
	classNames={{
		activeTrack: styles.inputRangeTrackActive,
		disabledInputRange: styles.inputRangeDisabled,
		inputRange: styles.inputRange,
		labelContainer: styles.labelContainer,
		maxLabel: styles.labelMax,
		minLabel: styles.labelMin,
		slider: styles.inputRangeSlider,
		sliderContainer: styles.sliderContainer
		track: styles.track,
		valueLabel: styles.valueLabel,
	}}
	formatLabel={value => ``}
	minValue={min}
	maxValue={max}
	value={this.state.value}
	onChange={value => this.setState({ value })}
/>

If you need to apply multiple styles as modules I use the classNames module. Not to be confused with the prop ^^ of the same name