# How to make RangeSlider larger in Pluto?

**URL:** <https://discourse.julialang.org/t/how-to-make-rangeslider-larger-in-pluto/117234>\
**Category:** General Usage\
**Tags:** pluto\
**Created:** [July 19, 2024, 12:53pm UTC](https://discourse.julialang.org/t/how-to-make-rangeslider-larger-in-pluto/117234 "2024-07-19T12:53:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ultrapoci](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ultrapoci/32/25356_2.png) [@ultrapoci](https://discourse.julialang.org/u/ultrapoci)\
**Post date:** [July 19, 2024, 12:53pm UTC](https://discourse.julialang.org/t/how-to-make-rangeslider-larger-in-pluto/117234/1 "2024-07-19T12:53:02Z")

</div>

I’m using a RangeSlider in Pluto but it is way too small. I’ve found [this](https://www.reddit.com/r/Julia/comments/qv72l6/biggerwider_ui_sliders_widgets_in_plutojl/) reddit post where a user wrote that putting this inside a cell will make all sliders bigger:

```julia
html"""
<style>
input[type*="range"] {
	width: 100%;
}
</style>
"""

```

This works, but only for `Slider`s, not for `RangeSlider`s. Thing is, I don’t seem to be able to find any documentation about using HTML in Pluto, except for some examples here and there. How do I make `RangeSlider`s larger?

---

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [July 19, 2024, 1:02pm UTC](https://discourse.julialang.org/t/how-to-make-rangeslider-larger-in-pluto/117234/2 "2024-07-19T13:02:30Z")

</div>

This does not work with RangeSlider as it uses a custom HTML element and does not rely on the default `range` input from HTML.

You can always find a lot more information about the elements you want to modify by directly opening the developer console with your Pluto notebook open like so:

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [July 19, 2024, 5:12pm UTC](https://discourse.julialang.org/t/how-to-make-rangeslider-larger-in-pluto/117234/3 "2024-07-19T17:12:30Z")

</div>

Try this instead:

```julia
html"""
<style>
.plutoui-rangeslider {
	width: 90%;
}
</style>
"""

```

---

<div class="post-metadata">

**Author:** ![ultrapoci](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ultrapoci/32/25356_2.png) [@ultrapoci](https://discourse.julialang.org/u/ultrapoci)\
**Post date:** [July 22, 2024, 5:51am UTC](https://discourse.julialang.org/t/how-to-make-rangeslider-larger-in-pluto/117234/4 "2024-07-22T05:51:19Z")

</div>

> [@mthelm85](#):
>
> ```julia-auto
> .plutoui-rangeslider {
> width: 90%;
> }
> 
> ```

Works perfectly, thanks!