# About pluto sliders and documentation

**URL:** <https://discourse.julialang.org/t/about-pluto-sliders-and-documentation/123982>\
**Category:** New to Julia\
**Created:** [December 19, 2024, 7:15am UTC](https://discourse.julialang.org/t/about-pluto-sliders-and-documentation/123982 "2024-12-19T07:15:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Geoff\_Russell](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/geoff_russell/32/214126_2.png) [@Geoff\_Russell](https://discourse.julialang.org/u/Geoff_Russell)\
**Post date:** [December 19, 2024, 7:15am UTC](https://discourse.julialang.org/t/about-pluto-sliders-and-documentation/123982/1 "2024-12-19T07:15:18Z")

</div>

Is there a formal description of the @bind command somewhere. I want to put labels before and after the slider …

Slider Label: …slider… Units label

e.g.,

Battery power: … MW  
Battery energy: … MWh

I’m mainly just coding using examples … which are fine for the basics, but sometimes you need details and my julia reading skills are still a bit basic 🙂

---

<div class="post-metadata">

**Author:** ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)\
**Post date:** [December 19, 2024, 8:36am UTC](https://discourse.julialang.org/t/about-pluto-sliders-and-documentation/123982/2 "2024-12-19T08:36:08Z")

</div>

I’m not sure how to place labels after the slider, but you can place a label before the slider with the following:

```julia
# cell 1
using PlutoUI

# cell 2
x = @bind x Slider(1:100, show_value = true)

```

The result is:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/c/0/c0eac093f057a6e36ba655e1a805463ad46f9897.png)

---

<div class="post-metadata">

**Author:** ![simeonschaub](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/simeonschaub/32/216566_2.png) [@simeonschaub](https://discourse.julialang.org/u/simeonschaub)\
**Post date:** [December 19, 2024, 9:51am UTC](https://discourse.julialang.org/t/about-pluto-sliders-and-documentation/123982/3 "2024-12-19T09:51:22Z")

</div>

You can combine Sliders with markdown, so your example would look something like:

```julia
md"""
Battery power: $(@bind x Slider(1:100, show_value = true)) MW

Battery energy: $(@bind y Slider(1:100, show_value = true)) MWh
"""

```

This binds battery power to `x` and battery energy to `y`

---

<div class="post-metadata">

**Author:** ![Geoff\_Russell](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/geoff_russell/32/214126_2.png) [@Geoff\_Russell](https://discourse.julialang.org/u/Geoff_Russell)\
**Post date:** [December 19, 2024, 10:58pm UTC](https://discourse.julialang.org/t/about-pluto-sliders-and-documentation/123982/4 "2024-12-19T22:58:54Z")

</div>

Wonderful. That’s perfect.

I’m still looking for detailed documentation of “tricks” like this … otherwise I need to pick up the magick one trick at a time 🙂

---

<div class="post-metadata">

**Author:** ![dqeeq](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@dqeeq](https://discourse.julialang.org/u/dqeeq)\
**Post date:** [December 20, 2024, 12:06am UTC](https://discourse.julialang.org/t/about-pluto-sliders-and-documentation/123982/5 "2024-12-20T00:06:26Z")

</div>

Here is another way, leveraging the [Unitful.jl](https://github.com/PainterQubits/Unitful.jl) package

```julia
using Unitful

```

```julia
using PowerSystemsUnits

```

```julia
Battery_Power = @bind x Slider(1u"MW":0.5u"MW":100u"MW", show_value = true)

```

```julia
Battery_Energy = @bind y Slider(1u"MWh":1u"MWh":100u"MWh", show_value = true)

```

---

<div class="post-metadata">

**Author:** ![g-gundam](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/g-gundam/32/47593_2.png) [@g-gundam](https://discourse.julialang.org/u/g-gundam)\
**Post date:** [December 20, 2024, 2:01am UTC](https://discourse.julialang.org/t/about-pluto-sliders-and-documentation/123982/6 "2024-12-20T02:01:40Z")

</div>

I put it in a markdown table to make it look better (just like the good old web 1.0 days).

```julia
md"""
| Option | Value | Units |
|----------------|---------------------------------------------|-------|
| Battery power | $(@bind x Slider(1:100, show_value = true)) | MW |
| Battery energy | $(@bind y Slider(1:100, show_value = true)) | MWh |
"""

```

---

<div class="post-metadata">

**Author:** ![simeonschaub](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/simeonschaub/32/216566_2.png) [@simeonschaub](https://discourse.julialang.org/u/simeonschaub)\
**Post date:** [December 20, 2024, 8:10am UTC](https://discourse.julialang.org/t/about-pluto-sliders-and-documentation/123982/7 "2024-12-20T08:10:15Z")

</div>

I’d recommend taking a look at the [featured notebooks](https://featured.plutojl.org/), specifically the one about interactivity might be useful to you:

> **[Interactivity](https://featured.plutojl.org/basic/plutoui.jl)**
>
> Sliders, buttons, dropdowns, and more using PlutoUI.jl!