;
};
A slider drives a progress bar whose color shifts at each threshold. The slider's reactive reference is forward-declared with a lambda, so it can be used by components above it in the tree — the lambda resolves at render time, after the slider exists.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Column, H3, Muted, Progress, Row, Slider, Text
from prefab_ui.rx import Rx
val = Rx(lambda: slider)
with Column(gap=6, css_class="max-w-sm mx-auto"):
H3("Health Monitor")
Muted("Drag the slider — the bar color changes at each threshold.")
with Column(gap=4):
with Row(css_class="justify-between items-center"):
Text("CPU Usage")
Text((val / 100).percent(), bold=True)
Progress(
value=val,
indicator_class=(val < 20).then(
"bg-red-500",
(val < 60).then(
"bg-primary",
(val < 75).then("bg-amber-500", "bg-green-500"),
),
),
)
slider = Slider(min=0, max=100, step=1, value=50)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-6 max-w-sm mx-auto",
"type": "Column",
"children": [
{"content": "Health Monitor", "type": "H3"},
{
"content": "Drag the slider \u2014 the bar color changes at each threshold.",
"type": "Muted"
},
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"cssClass": "justify-between items-center",
"type": "Row",
"children": [
{"content": "CPU Usage", "type": "Text"},
{
"cssClass": "font-bold",
"content": "{{ slider_25 / 100 | percent }}",
"type": "Text"
}
]
},
{
"cssClass": "pf-progress-flat",
"type": "Progress",
"value": "{{ slider_25 }}",
"variant": "default",
"size": "default",
"indicatorClass": "{{ slider_25 < 20 ? 'bg-red-500' : (slider_25 < 60 ? 'bg-primary' : (slider_25 < 75 ? 'bg-amber-500' : 'bg-green-500')) }}"
},
{
"name": "slider_25",
"value": 50.0,
"type": "Slider",
"min": 0.0,
"max": 100.0,
"step": 1.0,
"disabled": false,
"size": "default"
}
]
}
]
},
"state": {"slider_25": 50.0}
}
```
## How It Works
The meter is driven by one piece of [state](/concepts/state): the value of the `Slider` at the bottom. Rather than passing `name="..."` and referencing a string key, this example uses an *anonymous* binding — the `Slider` auto-generates its own state key, and `val = Rx(lambda: slider)` captures a [reactive reference](/concepts/expressions) to it. The `lambda` defers the lookup, so `val` can be defined at the top of the column even though `slider` itself is created at the bottom. Everything above reads through `val`; the slider is the only thing that writes.
The color logic is a `.then()` chain that reads like nested `if`/`elif`. `(val < 20).then("bg-red-500", (val < 60).then("bg-primary", (val < 75).then("bg-amber-500", "bg-green-500")))` resolves to red below 20, the primary color below 60, amber below 75, and green above — each `.then(a, b)` is "use `a` if the condition holds, otherwise fall through to `b`." The chain compiles to a nested ternary in the wire format — `{{ slider_1 < 20 ? 'bg-red-500' : ... }}` — which the renderer re-evaluates on every state change. Passing it to `indicator_class` swaps the bar's Tailwind color class live as you drag.
The same reference feeds the other reactive props without extra work. `Progress(value=val)` drives the bar's fill, and the readout `Text((val / 100).percent(), bold=True)` divides the value into a fraction and formats it as a percentage. Because `value`, `indicator_class`, and the `Text` content all trace back to the one slider, a single drag updates the number, the fill, and the color in one pass.