How to make the slider larger

Tooling Pluto
1

How to make the size of the slider bar larger, so that it is easier to fine tune the accessed values?

Right now I have a problem, that, when I move the slider, I actually skip some of the available values.

1 Like
2

Can one also modify the slider, so that the index of the used variable is displayed above the Slider?

3

See the PR at Slider styling by j-fu · Pull Request #146 · JuliaPluto/PlutoUI.jl · GitHub

4

Note you can pass custom HTML to Pluto’s @bind to get whatever styling you want. From docs:

@bind x html"<input type=range>"

The variable x will reflect the value of the HTML element’s value attribute.
So you can just add some CSS to make the slider wider:)

5

Unfortunately, I don’t have enough time to study css styles in detail.

I found the following workaround: one can move the slider using arrow keys on the keyboard, which facilitates the fine control over the position of the slider.

6 
@bind x html"<input type='range' style='width: 100%'/>"

Edit: the ranges of <input/> elements are set like so:

@bind x html"<input type='range' style='width: 50px' min='-5' max='10' step='2'>"
7

Is the width specified here in percents of the width of the notebook cell?

How do I actually specify the range of the values I want?

8

Technically, the width is specified in terms of the parent element of the input range in HTML, which in this case corresponds to the notebook cell.

Here you can find the settings of an input range type.