# Slider (/examples/widgets/slider) Slider with live value label [#slider-with-live-value-label] Center a slider and update a percentage label beneath it on value changes. A default `lv_slider_create` slider is centered on the active screen with a 2000 ms `LV_STYLE_ANIM_DURATION` for smooth programmatic moves. A label starting at `0%` is placed with `LV_ALIGN_OUT_BOTTOM_MID` below the slider, and an `LV_EVENT_VALUE_CHANGED` callback rewrites the label with the current `lv_slider_get_value` and realigns it under the slider. Fully styled slider parts [#fully-styled-slider-parts] Restyle every part of a slider with a cyan palette and pressed-state darkening. The theme styles are removed from a centered slider and four local styles are attached. The `LV_PART_MAIN` track is grey with negative vertical padding so the indicator overflows, the `LV_PART_INDICATOR` uses `LV_PALETTE_CYAN`, and the `LV_PART_KNOB` adds a darker border plus 6 px padding. A shared pressed-state style darkens both the indicator and knob, and a 300 ms linear transition on `LV_STYLE_BG_COLOR` cross-fades the color change. Range slider with pressed value tooltip [#range-slider-with-pressed-value-tooltip] Draw the current low-high pair above a range slider only while it is pressed. The slider is set to `LV_SLIDER_MODE_RANGE` over 0 to 100 with a start value of 20 and an end value of 70. `LV_EVENT_REFR_EXT_DRAW_SIZE` reserves 50 px above the widget so the tooltip has room, and `LV_EVENT_DRAW_MAIN_END` draws a ` - ` label centered above the indicator when `LV_STATE_PRESSED` is active. Releasing the slider removes the tooltip on the next redraw. Reversed slider direction [#reversed-slider-direction] Center a slider whose range runs from 100 down to 0 with a live label. `lv_slider_set_range(slider, 100, 0)` reverses the fill direction so the indicator grows from the right and the reported value drops as the knob moves right. A label below the slider starts at `0%` and is rewritten from `lv_slider_get_value` in the `LV_EVENT_VALUE_CHANGED` callback, then realigned with `LV_ALIGN_OUT_BOTTOM_MID`.