How to make RangeSlider larger in Pluto?

General Usage
1

I’m using a RangeSlider in Pluto but it is way too small. I’ve found this reddit post where a user wrote that putting this inside a cell will make all sliders bigger:

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

This works, but only for Sliders, not for RangeSliders. 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 RangeSliders larger?

2

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:

2 Likes
3

Try this instead:

html"""
<style>
.plutoui-rangeslider {
	width: 90%;
}
</style>
"""
1 Like
4

Works perfectly, thanks!