Skip to content

Commit 9dea3b3

Browse files
authored
feat(ui5-range-slider): Add Range Slider component (#2310)
Introduce ui5-range-slider component that represents a numerical interval and two handles to select a sub-range within it.The purpose of the component is to enable visual selection of sub-ranges within a given interval. Properties: - `min `- The minimum value of the slider range - `max `- The maximum value of the slider range - `value `- The current value of the slider - `step `- Determines the increments in which the slider will move - `showTickmarks` - Displays a visual divider between the step values - `showToolTip `- Determines if a tooltip should be displayed above the handle - `labelInterval `- Labels some or all of the tickmarks with their values. - `disabled`- Defines whether the <code>Slider</code> is in disabled state. Events: - `change` - Fired when the value changes and the user has finished interacting with the slider. - `input` - Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.
1 parent 0b948dd commit 9dea3b3

11 files changed

+895
-11
lines changed

packages/main/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ import ResponsivePopover from "./dist/ResponsivePopover.js";
6666
import SegmentedButton from "./dist/SegmentedButton.js";
6767
import Select from "./dist/Select.js";
6868
import Slider from "./dist/Slider.js";
69+
import RangeSlider from "./dist/RangeSlider.js";
6970
import Switch from "./dist/Switch.js";
7071
import MessageStrip from "./dist/MessageStrip.js";
7172
import MultiComboBox from "./dist/MultiComboBox.js";

packages/main/src/RangeSlider.hbs

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{{>include "./SliderBase.hbs"}}
2+
3+
{{#*inline "handles"}}
4+
<div class="ui5-slider-handle ui5-slider-handle--start" style="{{styles.startHandle}}">
5+
{{#if showTooltip}}
6+
<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
7+
<span class="ui5-slider-tooltip-value">{{tooltipStartValue}}</span>
8+
</div>
9+
{{/if}}
10+
</div>
11+
<div class="ui5-slider-handle ui5-slider-handle--end" style="{{styles.endHandle}}">
12+
{{#if showTooltip}}
13+
<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">
14+
<span class="ui5-slider-tooltip-value">{{tooltipEndValue}}</span>
15+
</div>
16+
{{/if}}
17+
</div>
18+
{{/inline}}

0 commit comments

Comments
 (0)