Using InputRangeClassNames with module scss

[knaveenkumar3576]

Hi ,

I am trying to change the color of the track?. Could you please help me on this?

FilterCost.scss: input-range__track { background:greenyellow; }

FilterCost.js import React from 'react'; import InputRange from 'react-input-range'; import classes from './FilterCost.scss' import '../../../../node_modules/react-input-range/lib/css/index.css';

const inputClasses = { 'input-range__track' : classes['input-range__track'] }

<InputRange InputRangeClassNames={inputClasses} axValue={10000} minValue={0} ... .../>

[simonireilly]

The names to assign the classes can be found in the below.

Having a similar issue. This will remove all the existing classNames so you should import the default-class-names and map in the new ones.

https://github.com/davidchin/react-input-range/blob/6f7f1d4cdd6729e24ee4b0788645151d343c7dc6/src/js/input-range/default-class-names.js#L1-L19

[astinaam]

The following worked.

import defaultClassNames from 'react-input-range/src/js/input-range/default-class-names.js';

defaultClassNames['slider'] = 'custom-class';
defaultClassNames['activeTrack'] = 'custom-class';
...
<InputRange
     classNames={defaultClassNames}
     ... />