# Slider (lv_slider) (/widgets/slider)



Overview [#overview]

The Slider Widget looks like a [Bar (lv\_bar)](/widgets/bar) supplemented with
a knob. The knob can be dragged to set the Slider's value. Like Bar, a Slider
can be vertical or horizontal.

Parts and Styles [#parts-and-styles]

* <ApiLink name="LV_PART_MAIN" /> The background of the Slider. Uses the
  [typical background style properties](/common-widget-features/styles/overview). `padding` makes
  the indicator smaller in the respective direction.
* <ApiLink name="LV_PART_INDICATOR" /> The indicator that shows the current state of
  the Slider; also uses the [typical background style properties](/common-widget-features/styles/overview).
* <ApiLink name="LV_PART_KNOB" /> A rectangle (or circle) drawn at the current value;
  also uses the [typical background style properties](/common-widget-features/styles/overview) to
  describe the knob(s).  By default, the knob is round (radius-style can modify this)
  with side length equal to the smaller dimension of the Slider.  The knob can be
  made larger with the `padding` values.  Padding values can be asymmetric as well.

Usage [#usage]

Value, range and orientation [#value-range-and-orientation]

Once a Slider is created, it has:

* value == 0
* default range of \[0..100],
* horizontal orientation, with
* default width of approximately 2 inches (according to configured value of <ApiLink name="LV_DPI_DEF" />),
* default height of approximately 1/10 inch (according to configured value of <ApiLink name="LV_DPI_DEF" />).

To set different values use:

* <ApiLink name="lv_slider_set_value" display="lv_slider_set_value(slider, new_value, LV_ANIM_ON/OFF)" /> (animation time
  is set by the styles' `anim_time` property);
* <ApiLink name="lv_slider_set_range" display="lv_slider_set_range(slider, min , max)" />; and
* for orientation, width and height, simply set width and height properties;
* <ApiLink name="lv_slider_set_orientation" display="lv_slider_set_orientation(slider, orientation)" /> to override orientation
  caused by `width` and `height`.  Valid values for `orientation` are:

  * <ApiLink name="LV_SLIDER_ORIENTATION_AUTO" />
  * <ApiLink name="LV_SLIDER_ORIENTATION_HORIZONTAL" />
  * <ApiLink name="LV_SLIDER_ORIENTATION_VERTICAL" />

The default drawing direction is from left to right in horizontal orientation and
bottom to top in vertical orientation.  If the minimum value is set to be greater
than the maximum value (e.g. \[100..0]), the drawing direction is reversed.

Modes [#modes]

The Slider can be in one of the following modes:

* <ApiLink name="LV_SLIDER_MODE_NORMAL" /> A normal Slider as described above (default)
* <ApiLink name="LV_SLIDER_SYMMETRICAL" /> Draw the indicator from the zero value to
  current value. Requires negative minimum range and positive maximum range.
* <ApiLink name="LV_SLIDER_RANGE" /> Allows setting the start value as well by
  <ApiLink name="lv_bar_set_start_value" display="lv_bar_set_start_value(slider, new_value, LV_ANIM_ON/OFF)" />. The start
  value must always be smaller than the end value.

The mode can be changed with <ApiLink name="lv_slider_set_mode" display="lv_slider_set_mode(slider, LV_SLIDER_MODE_...)" />

Knob-only mode [#knob-only-mode]

Normally, the Slider can be adjusted either by dragging the knob, or by
clicking on the Slider bar. In the latter case the knob moves to the
point clicked and the 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 <ApiLink name="LV_OBJ_FLAG_ADV_HITTEST" /> flag:
<ApiLink name="lv_obj_add_flag" display="lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST)" />.

Any extended click area (set by <ApiLink name="lv_obj_set_ext_click_area" display="lv_obj_set_ext_click_area(slider, value)" />)
increases the knob's click area.

Data binding [#data-binding]

To get familiar with observers, subjects, and data bindings in general, visit the
[Observer](/main-modules/observer/observer) page.

This method of subscribing to an integer Subject affects a Slider Widget's integer
value directly.  Note that this is a two-way binding (Subject \<===> Widget), so an end
user's direct interaction with the Slider Widget updates the Subject's value and vice
versa.

It supports integer and float subjects.

* <ApiLink name="lv_slider_bind_value" display="lv_slider_bind_value(slider, &subject)" />

Events [#events]

* <ApiLink name="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.
* <ApiLink name="LV_EVENT_RELEASED" /> Sent once when Slider is released.

<Callout type="info" title="Further Reading">
  Learn more about [Events](/common-widget-features/events) emitted by all Widgets.

  Learn more about [events](/common-widget-features/events).
</Callout>

Keys [#keys]

* `LV_KEY_UP/RIGHT` Increment Slider's value by 1.
* `LV_KEY_DOWN/LEFT` Decrement Slider's value by 1.

<Callout type="info" title="Further Reading">
  Learn more about [Keys](/main-modules/indev/keypad).
</Callout>

Examples [#examples]

Simple Slider [#simple-slider]

<LvglExample name="lv_example_slider_1" path="widgets/slider/lv_example_slider_1" />

Slider with custom style [#slider-with-custom-style]

<LvglExample name="lv_example_slider_2" path="widgets/slider/lv_example_slider_2" />

Slider with extended drawer [#slider-with-extended-drawer]

<LvglExample name="lv_example_slider_3" path="widgets/slider/lv_example_slider_3" />

Slider with opposite direction [#slider-with-opposite-direction]

<LvglExample name="lv_example_slider_4" path="widgets/slider/lv_example_slider_4" />

API [#api]