Changling slider color?

[OdinSaturnalia]

This seems pretty straight-forward, but I haven't been able to figure out how to bring in and modify the slider's color? Is there something in the docs I'm missing? Thanks

[susan8098]

wondering about this too

[susan8098]

@OdinSaturnalia the solution I found is simply create a css/scss file in your own directory to override the styles. Luckily these styles weren't injected inline.

[Claim0013]

@susan8098 How did you access specific elements? I tried editing the css file from the node_modules but I see no change. I wanted to change color and font size.

[susan8098]

@OdinSaturnalia Create a css file in your own project directory, not the node_modules! And in browser inspector tool, you can see the class names of the element. You target those classnames in your css file in YOUR project directory to override the original styles.

[EmaSuriano]

Hello there, I had to do the same but in this case using styled-components. I leave you the snippet so you can take a look.

import React from 'react';
import InputRange from 'react-input-range';
import styled from 'styled-components';

const RangeSliderContainer = styled.div`
  .input-range__track--active,
  .input-range__slider {
    background: ${props => props.color}; 
    border-color: ${props => props.color};
  }
`;

const RangeSlider = () => (
  <RangeSliderContainer color="red">
    <InputRange />
  </RangeSliderContainer>
);

And that's it! By doing this you can control the color of the InputRange via the prop of RangeSliderContainer

[gimtonic]

You may only add this in your css

.input-range__track--active,
.input-range__slider {
    background: red !important;
    border-color: red !important;
} 

[oleksii-kotvytskyi]

Hi. In Documentaion has file defalut-class-names (it's name of existing classes) and you can expand functionality the folowing way

import React from 'react';
import InputRange from 'react-input-range';

import s from './styles.scss';

const DEFAULT_CLASS_NAMES = {
  activeTrack: 'input-range__track input-range__track--active',
  disabledInputRange: 'input-range input-range--disabled',
  inputRange: 'input-range',
  labelContainer: 'input-range__label-container',
  maxLabel: 'input-range__label input-range__label--max',
  minLabel: 'input-range__label input-range__label--min',
  slider: 'input-range__slider',
  sliderContainer: 'input-range__slider-container',
  track: 'input-range__track input-range__track--background',
  valueLabel: 'input-range__label input-range__label--value',
};

export const Slider = ({ value, minValue, maxValue, ...props }) => {
  return <InputRange {...props} value={{ min: value.min, max: value.max }} minValue={minValue} maxValue={maxValue} />;
};

export const SliderLight = ({ ...props }) => {
  return (
    <Slider
      {...props}
      classNames={{
        ...DEFAULT_CLASS_NAMES,
        maxLabel: `${DEFAULT_CLASS_NAMES.maxLabel} ${s.maxLabelLight}`,
        minLabel: `${DEFAULT_CLASS_NAMES.minLabel} ${s.minLabelLight}`,
        activeTrack: `${DEFAULT_CLASS_NAMES.activeTrack} ${s.activeTrackLight}`,
      }}
    />
  );
};