I have a css file for a slider. Can we customize DASH sliders with a css?

Dash Python
1

Hi everyone!

I am creating a DASHBOARD to do quality check of MRI scans.

Screen Shot 2022-11-13 at 3.18.28 AM
Screen Shot 2022-11-13 at 3.18.28 AM1920×1002 118 KB

And I have the following css file that contains some parameters for a slider.

`.range input{
	-webkit-appearance:none;
	width:400px;
	height:4px;
	border-radius:5px;
	background-color:#ba3950;
	outline:none;
}
.range input::-webkit-slider-thumb{
	-webkit-appearance:none;
	width:20px;
	height:20px;
	border-radius:50%;
	background-color:#a83348;
}
.range span{
	position:absolute;
	margin-left:14px;
	width:50px;
	height:30px;
	background-color:#222;
	color:#fff;
	border-radius:3px;
	text-align:center;
	line-height:30px;
}
.range span:before{
	content:'';
	position:absolute;
	border-right:9px solid transparent;
	border-left:9px solid transparent;
	border-bottom:12px solid #222;
	left:-10px;
	top:50%;
	transform:translateY(-50%) rotate(-90deg);
}`

I have tried in multiple ways to overide the dcc and the daq sliders and I have tried to change their appearance, particularly the white color they have without any success. Putting the css file with the parameters do not work for the sliders though it works for customizing buttons. I have tried also to use. The parameters for the sliders in the bootstrap themes but they do not have any effect on the DASH sliders. What can I do? Is there a way to get the parameters above to work on the DASH sliders? I will highly appreciate your help. Any tips to customize the sliders will be highly appreciated.

2

Hi @numam

The dcc.Slider and dcc.RangeSlider are bundled with their own css, so they don’t respond to things like a Bootstrap stylesheet or generic CSS. If you inspect the slider element in your browser, you will see they have selectors that start something like rc-slider-

If you are using a Bootstrap stylesheeet, you can learn more about customizing dcc components and the DataTable at this site

If you aren’t using Bootstrap, you can start with the stylesheet from the dash-bootstrap-templates library and customize it. You can find a link to it on this page

2 Likes
3

AnnMarrieW! Thank you so so much for your answer. I am new to programming and using DASH. I had seen the inspect option before but I never took the time to check what it was all about. I inspected the slider as you suggested and I found the selector and different parameters I needed. I copied all the parameters in the native slider css and created a new css that I placed into my assets folder. Now, I can change the appearance of the slider using the copy of the css file I made.

I spent hours yesterday trying to figure this out and was ready to try again. You saved me a lot of time. Have a very good day!

2 Likes