Slider: Empty

[ghost]

It just renders nothing... not sure but this doesnt work.. I see all the div's but they are all invisible.

[SteefTheBeef]

Hello, you have to include the styles/css as well.

[ghost]

Umm not sure what you mean specifically... and no documentation on this? I tried copying the css file into the css file in my component and that did nothing.

[just-boris]

@bradynapier have you tried to copy this file from the sources? It is less file, and should be preprocessed before using.

Package in the npm contains built version, so you can grab styles there.

[joemaller]

Had the same problem, the styles weren't working with Webpack for some reason. Moving the css file and linking it directly into the html finally got the slider to appear.

Edit: To clarify, rc-slider was installed via npm. The css file is here: rc-slider/assets/index.css

[elrrrrrrr]

import 'antd/lib/index.css'

[just-boris]

I am using rc-slider with Webpack too. Here how I do it:

import 'rc-slider/assets/index.css';
import Slider from 'rc-slider';

I have following setup for css loader

{
  test:   /\.css$/,
  loader: 'style-loader!css-loader!postcss-loader' 
}

You can see full setup in my project here

[just-boris]

Also, try to look through your compiled css. Do you see any occurrences of .rc-slider in your compiled css?

[benjycui]

Close without pride.

[golfreak923]

I also had this issue but ultimately ended up using a slightly-different way of importing the styles since we already have complex webpack config thanks to trying to use rc-slider in an ejected create-react-app. Here's what finally worked for us (whether or not this is best practice YMMV):
First add style-loader:

yarn add style-loader

or

npm install style-loader --save

Then, import the index.css like such:

import '!style-loader!css-loader!rc-slider/assets/index.css';