# How to make the slider larger

**URL:** <https://discourse.julialang.org/t/how-to-make-the-slider-larger/86895>\
**Category:** Pluto\
**Tags:** plutoui\
**Created:** [September 7, 2022, 2:39pm UTC](https://discourse.julialang.org/t/how-to-make-the-slider-larger/86895 "2022-09-07T14:39:57Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gregstrq](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/gregstrq/32/20620_2.png) [@Gregstrq](https://discourse.julialang.org/u/Gregstrq)\
**Post date:** [September 7, 2022, 2:39pm UTC](https://discourse.julialang.org/t/how-to-make-the-slider-larger/86895/1 "2022-09-07T14:39:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Gregstrq](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/gregstrq/32/20620_2.png) [@Gregstrq](https://discourse.julialang.org/u/Gregstrq)\
**Post date:** [September 7, 2022, 2:43pm UTC](https://discourse.julialang.org/t/how-to-make-the-slider-larger/86895/2 "2022-09-07T14:43:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![j-fu](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/j-fu/32/11373_2.png) [@j-fu](https://discourse.julialang.org/u/j-fu)\
**Post date:** [September 7, 2022, 2:45pm UTC](https://discourse.julialang.org/t/how-to-make-the-slider-larger/86895/3 "2022-09-07T14:45:14Z")

</div>

See the PR at [Slider styling by j-fu · Pull Request #146 · JuliaPluto/PlutoUI.jl · GitHub](https://github.com/JuliaPluto/PlutoUI.jl/pull/146)

---

<div class="post-metadata">

**Author:** ![Jollywatt](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jollywatt/32/202198_2.png) [@Jollywatt](https://discourse.julialang.org/u/Jollywatt)\
**Post date:** [September 7, 2022, 8:42pm UTC](https://discourse.julialang.org/t/how-to-make-the-slider-larger/86895/4 "2022-09-07T20:42:33Z")

</div>

Note you can pass custom HTML to Pluto’s `@bind` to get whatever styling you want. From [docs](https://fonsp.com/article-test-3/mycoolnotebook.html):

```julia
@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:)

---

<div class="post-metadata">

**Author:** ![Gregstrq](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/gregstrq/32/20620_2.png) [@Gregstrq](https://discourse.julialang.org/u/Gregstrq)\
**Post date:** [September 8, 2022, 9:59am UTC](https://discourse.julialang.org/t/how-to-make-the-slider-larger/86895/5 "2022-09-08T09:59:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jollywatt](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jollywatt/32/202198_2.png) [@Jollywatt](https://discourse.julialang.org/u/Jollywatt)\
**Post date:** [September 8, 2022, 11:29am UTC](https://discourse.julialang.org/t/how-to-make-the-slider-larger/86895/6 "2022-09-08T11:29:55Z")

</div>

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

```

* * *

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

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

```

---

<div class="post-metadata">

**Author:** ![Gregstrq](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/gregstrq/32/20620_2.png) [@Gregstrq](https://discourse.julialang.org/u/Gregstrq)\
**Post date:** [September 8, 2022, 11:43am UTC](https://discourse.julialang.org/t/how-to-make-the-slider-larger/86895/7 "2022-09-08T11:43:15Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![RayleighLord](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rayleighlord/32/33592_2.png) [@RayleighLord](https://discourse.julialang.org/u/RayleighLord)\
**Post date:** [September 8, 2022, 12:28pm UTC](https://discourse.julialang.org/t/how-to-make-the-slider-larger/86895/8 "2022-09-08T12:28:10Z")

</div>

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](https://www.w3schools.com/tags/att_input_type_range.asp#:~:text=The%20%3Cinput%20type%3D%22range,accepted%20with%20the%20attributes%20below.&text=Tip%3A%20Always%20add%20the%20%3Clabel,tag%20for%20best%20accessibility%20practices!) you can find the settings of an input range type.