# Bar (/examples/widgets/bar) Bar bind value with increment buttons [#bar-bind-value-with-increment-buttons] Mutate a bound int subject via `subject_increment_event` instead of dragging. The bar listens to `subject_value`. Each +/- button carries two `` children — one on `clicked` and one on `long_pressed_repeat` — so a tap nudges by `step` and a hold keeps repeating. `min_value`/`max_value` clamp the result and `rollover="true"` wraps around once the bound is hit; hold past 100 to see it wrap back to 0. Bar image indicator [#bar-image-indicator] Use bitmaps as the bar track and indicator — the bar clips each image to its part. `bg_image_src` replaces the solid background fill with pixels sampled from a bitmap. Set it on `selector="main"` for the background track and on `selector="indicator"` for the filled portion. As the value rises, the indicator image is revealed left-to-right, showing cyan segments that transition to yellow then red at the high end. Both images are 280×30, matching the bar widget size. Bar modes [#bar-modes] Compare normal, symmetrical, and range modes. Normal fills from min\_value to value. Symmetrical needs a range that crosses zero and fills outward from the middle, so positive and negative values pull the indicator in opposite directions. Range mode draws a band between start\_value and value, useful for picking an interval rather than a single number. Bar orientation and size [#bar-orientation-and-size] Compare horizontal and explicit vertical bars. The horizontal bar uses the default orientation derived from a wide-and-short size. The vertical one sets orientation="vertical" explicitly and uses a tall, narrow size so the indicator grows upward instead of left-to-right. Bar styling [#bar-styling] Style the MAIN track and the INDICATOR independently, with a gradient fill. Bar exposes two parts: MAIN (the background track) and INDICATOR (the filled portion). Each is styled separately via `selector="main"` and `selector="indicator"`. The indicator style adds a horizontal gradient and a darker inner shadow so the fill reads as a glossy progress strip on top of the recessed track. Bar value and custom range [#bar-value-and-custom-range] Drive the indicator with a custom min/max range. The first bar uses the default 0..100 range with value 30. The second bar shifts the range to -20..80 with value 35 to demonstrate that ranges need not start at zero — the indicator length is computed relative to wherever the range begins.