dotStyle seems to not be working

[otherjohn]

I would like to customize the dot in the slider by changing the background color and border. Here is my code:

<Slider
          min={0}
          max={2000000}
          value={Number(home)}
          onChange={getChangeHandler}
          step={10000}
          defaultValue="250000"
          trackStyle={{ backgroundColor: '#43d89f', height: 8 }}
          dotStyle={{backgroundColor: '#f04823', borderColor: '#f04823'}}
          activeDotStyle={{ backgroundColor: '#f04823', borderColor: '#f04823' }}
        />

The track style changed but not the dotStyle, it still has the same default color. I have tried it with activeDotStyle also and got the same results.

[KeRusty]

Agreed, same issue here

[KelvinMitaki]

I'm facing the issue too

[kerm1it]

I will try fix this.

[kerm1it]

@KeRusty @KelvinMitaki You need to set dots to true

<Slider
  min={0}
  max={20000}
  defaultValue={3}
  dots
  step={10000}
  trackStyle={{ backgroundColor: '#43d89f', height: 8 }}
  dotStyle={{backgroundColor: '#f04823', borderColor: '#f04823'}}
  activeDotStyle={{ backgroundColor: '#f04823', borderColor: '#f04823' }}
/>

This is screenshots:

[jmargolisvt]

Setting dots to true does not solve the issue for me. Instead of effecting the active dot, it adds tons of span tags and the styles get applied to the track instead.

<Slider
    activeDotStyle={{
      transform: 'scale(1.3)',
      backgroundColor: 'red',
    }}
    dots
    handleStyle={{
      borderColor: 'var(--sw-blue)',
    }}
    max={maxValue}
    min={minValue}
    onAfterChange={() => setDragging(false)}
    onBeforeChange={() => setDragging(true)}
    onChange={(val) => updateValue(val)}
    step={0.1}
    trackStyle={{ backgroundColor: 'var(--sw-blue)' }}
    value={controlledValue}
  />

[fresonn]

Override all slider styles possible only with:

import styles from './Styles.module.scss'

<Slider
    ...
    className={styles.slider}
/>

CSS module:

.slider {
  & :global(.rc-slider-track) {
    background-color: #aeaeae;
  }
}

With :global you can override all internal class name. P.S: SCSS for convenience, this is all implementable in pure CSS