1# Slider (lv_slider)
2
3## Overview
4
5The Slider object looks like a [Bar](/widgets/core/bar) supplemented with a knob. The knob can be dragged to set a value. Just like Bar, Slider can be vertical or horizontal.
6
7
8## Parts and Styles
9- `LV_PART_MAIN` The background of the slider. Uses all the typical background style properties. `padding` makes the indicator smaller in the respective direction.
10- `LV_PART_INDICATOR` The indicator that shows the current state of the slider. Also uses all the typical background style properties.
11- `LV_PART_KNOB` A rectangle (or circle) drawn at the current value. Also uses all the typical background properties to describe the knob(s). By default, the knob is square (with an optional corner radius) with side length equal to the smaller side of the slider. The knob can be made larger with the `padding` values. Padding values can be asymmetric too.
12
13## Usage
14
15### Value and range
16To set an initial value use `lv_slider_set_value(slider, new_value, LV_ANIM_ON/OFF)`.  The animation time is set by the styles' `anim_time` property.
17
18To specify the range (min, max values), `lv_slider_set_range(slider, min , max)` can be used.
19
20### Modes
21The slider can be one of the following modes:
22- `LV_SLIDER_MODE_NORMAL` A normal slider as described above
23- `LV_SLIDER_SYMMETRICAL` Draw the indicator form the zero value to current value. Requires negative minimum range and positive maximum range.
24- `LV_SLIDER_RANGE` Allows setting the start value too by `lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF)`. The start value has to be always smaller than the end value.
25
26The mode can be changed with `lv_slider_set_mode(slider, LV_SLIDER_MODE_...)`
27
28### Knob-only mode
29Normally, the slider can be adjusted either by dragging the knob, or by clicking on the slider bar.
30In the latter case the knob moves to the point clicked and slider value changes accordingly. In some cases it is desirable to set the slider to react on dragging the knob only. This feature is enabled by adding the `LV_OBJ_FLAG_ADV_HITTEST`: `lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST)`.
31
32The extended click area (set by `lv_obj_set_ext_click_area(slider, value)`) increases to knob's click area.
33
34## Events
35- `LV_EVENT_VALUE_CHANGED` Sent while the slider is being dragged or changed with keys. The event is sent continuously while the slider is being dragged.
36- `LV_EVENT_RELEASED` Sent when the slider has just been released.
37- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following parts.
38    - `LV_SLIDER_DRAW_PART_KNOB` The main (right) knob of the slider
39        - `part`: `LV_PART_KNOB`
40        - `draw_area`: area of the indicator
41        - `rect_dsc`
42        - `id`: 0
43    - `LV_SLIDER_DRAW_PART_KNOB`  The left knob of the slider
44        - `part`: `LV_PART_KNOB`
45        - `draw_area`: area of the indicator
46        - `rect_dsc`
47        - `id`: 1
48
49See the events of the [Bar](/widgets/core/bar) too.
50
51Learn more about [Events](/overview/event).
52
53## Keys
54- `LV_KEY_UP/RIGHT` Increment the slider's value by 1
55- `LV_KEY_DOWN/LEFT` Decrement the slider's value by 1
56
57Learn more about [Keys](/overview/indev).
58
59## Example
60
61```eval_rst
62
63.. include:: ../../../examples/widgets/slider/index.rst
64
65```
66
67## API
68
69```eval_rst
70
71.. doxygenfile:: lv_slider.h
72  :project: lvgl
73
74```
75