# Font size of dast slider

**URL:** <https://community.plotly.com/t/font-size-of-dast-slider/72521>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [February 9, 2023, 7:23pm UTC](https://community.plotly.com/t/font-size-of-dast-slider/72521 "2023-02-09T19:23:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kamran](https://avatars.discourse-cdn.com/v4/letter/k/b9e5f3/32.png) [@Kamran](https://community.plotly.com/u/Kamran)\
**Post date:** [February 9, 2023, 7:23pm UTC](https://community.plotly.com/t/font-size-of-dast-slider/72521/1 "2023-02-09T19:23:00Z")

</div>

How to change the font size and style of labels in the slider function of Dash (dash.dcc.Slider)?

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [February 9, 2023, 8:39pm UTC](https://community.plotly.com/t/font-size-of-dast-slider/72521/2 "2023-02-09T20:39:26Z")

</div>

Hi @Kamran you can use CSS for that.

> **[Adding CSS & JS and Overriding the Page-Load Template | Dash for Python...](https://dash.plotly.com/external-resources#adding-your-own-css-and-javascript-to-dash-apps)**
>
> Learn how to add custom CSS and JS to your app as well as how to customize the HTML title, meta tags, and more.

For example you could create a file named `01_custom.css` in your assets folder containing this:

```css
.rc-slider-mark-text {
    font-size: 22px;
    color: green;
}

.rc-slider-mark-text-active {
  color: red;
  }

```

which creates soething like this:  
 ![slide](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/1/0/10a8b3d5e86450ce255e6e9c5928df65074fc499.gif)

---

<div class="post-metadata">

**Author:** ![Kamran](https://avatars.discourse-cdn.com/v4/letter/k/b9e5f3/32.png) [@Kamran](https://community.plotly.com/u/Kamran)\
**Post date:** [February 10, 2023, 3:37pm UTC](https://community.plotly.com/t/font-size-of-dast-slider/72521/3 "2023-02-10T15:37:50Z")

</div>

Hi @AIMPED,

Thank you for your answer. It is working fine for me. Can I use this function .rc-slider-mark-text to change the fontsize or fontcolor only for the selected active mark text? I want the output to be something like this:

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/7/d/7dd87d471cf33aa7e3395df55fecf8f12378ee69.png)