Skip to content

fix(ui5-slider, ui5-range-slider): api enhancements #3369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
fifoosid wants to merge 1 commit into from
Closed

fix(ui5-slider, ui5-range-slider): api enhancements #3369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/main/src/ColorPicker.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@
<ui5-slider
disabled="{{inputsDisabled}}"
class="ui5-color-picker-hue-slider"
min="0"
max="1530"
min-value="0"
max-value="1530"
value="{{_hue}}"
@ui5-input="{{_handleHueInput}}"
></ui5-slider>
<ui5-slider
disabled="{{inputsDisabled}}"
class="ui5-color-picker-alpha-slider"
min="0"
max="1"
min-value="0"
max-value="1"
step="0.01"
value="{{_alpha}}"
@ui5-input="{{_handleAlphaInput}}"
Expand Down
12 changes: 6 additions & 6 deletions packages/main/src/RangeSlider.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
role="slider"
tabindex="{{tabIndex}}"
aria-orientation="horizontal"
aria-valuemin="{{min}}"
aria-valuemax="{{max}}"
aria-valuemin="{{minValue}}"
aria-valuemax="{{maxValue}}"
aria-valuetext="From {{startValue}} to {{endValue}}"
aria-labelledby="{{_id}}-sliderDesc"
aria-disabled="{{_ariaDisabled}}"
Expand All @@ -29,8 +29,8 @@
role="slider"
tabindex="{{tabIndex}}"
aria-orientation="horizontal"
aria-valuemin="{{min}}"
aria-valuemax="{{max}}"
aria-valuemin="{{minValue}}"
aria-valuemax="{{maxValue}}"
aria-valuenow="{{startValue}}"
aria-labelledby="{{_id}}-startHandleDesc"
aria-disabled="{{_ariaDisabled}}"
Expand All @@ -49,8 +49,8 @@
role="slider"
tabindex="{{tabIndex}}"
aria-orientation="horizontal"
aria-valuemin="{{min}}"
aria-valuemax="{{max}}"
aria-valuemin="{{minValue}}"
aria-valuemax="{{maxValue}}"
aria-valuenow="{{endValue}}"
aria-labelledby="{{_id}}-endHandleDesc"
aria-disabled="{{_ariaDisabled}}"
Expand Down
24 changes: 12 additions & 12 deletions packages/main/src/RangeSlider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@ const metadata = {
* <h3>Structure</h3>
* The most important properties of the Range Slider are:
* <ul>
* <li>min - The minimum value of the slider range</li>
* <li>max - The maximum value of the slider range</li>
* <li>minValue - The minimum value of the slider range</li>
* <li>maxValue - The maximum value of the slider range</li>
* <li>value - The current value of the slider</li>
* <li>step - Determines the increments in which the slider will move</li>
* <li>showTooltip - Determines if a tooltip should be displayed above the handle</li>
Expand Down Expand Up @@ -224,8 +224,8 @@ class RangeSlider extends SliderBase {
// Set the target of the interaction based on the focused inner element
this._setAffectedValueByFocusedElement();

const min = this._effectiveMin;
const max = this._effectiveMax;
const min = this._effectiveMinValue;
const max = this._effectiveMaxValue;
const affectedValue = this._valueAffected;

// If home/end key is pressed and no single handle is focused the active element
Expand All @@ -244,7 +244,7 @@ class RangeSlider extends SliderBase {
return;
}

// Update a single value if one of the handles is focused or the range if not already at min or max
// Update a single value if one of the handles is focused or the range if not already at minValue or maxValue
if (affectedValue && !this._isPressInCurrentRange) {
const newValue = this.constructor.clipValue(newValueOffset + this[affectedValue], min, max);
this.update(affectedValue, newValue, null);
Expand Down Expand Up @@ -392,7 +392,7 @@ class RangeSlider extends SliderBase {
* @private
*/
_updateValueOnHandleDrag(event) {
const newValue = this.constructor.getValueFromInteraction(event, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);
const newValue = this.constructor.getValueFromInteraction(event, this._effectiveStep, this._effectiveMinValue, this._effectiveMaxValue, this.getBoundingClientRect(), this.directionStart);
this.update(this._valueAffected, newValue, null);
}

Expand Down Expand Up @@ -561,8 +561,8 @@ class RangeSlider extends SliderBase {
return [this.startValue, this.endValue];
}

const min = this._effectiveMin;
const max = this._effectiveMax;
const min = this._effectiveMinValue;
const max = this._effectiveMaxValue;
const selectedRange = this.endValue - this.startValue;

// Computes the new value based on the difference of the current cursor location from the start of the interaction
Expand All @@ -585,8 +585,8 @@ class RangeSlider extends SliderBase {
* @private
*/
_calculateStartValueByOffset(currentPageXPos, initialStartHandlePageXPos) {
const min = this._effectiveMin;
const max = this._effectiveMax;
const min = this._effectiveMinValue;
const max = this._effectiveMaxValue;
const step = this._effectiveStep;
const dom = this.getBoundingClientRect();

Expand Down Expand Up @@ -622,8 +622,8 @@ class RangeSlider extends SliderBase {
* @private
*/
_updateHandlesAndRange(newValue) {
const max = this._effectiveMax;
const min = this._effectiveMin;
const max = this._effectiveMaxValue;
const min = this._effectiveMinValue;
const prevStartValue = this.getStoredPropertyState("startValue");
const prevEndValue = this.getStoredPropertyState("endValue");
const affectedValue = this._valueAffected;
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/Slider.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
role="slider"
tabindex="{{tabIndex}}"
aria-orientation="horizontal"
aria-valuemin="{{min}}"
aria-valuemax="{{max}}"
aria-valuemin="{{minValue}}"
aria-valuemax="{{maxValue}}"
aria-valuenow="{{value}}"
aria-labelledby="{{_id}}-sliderDesc"
aria-disabled="{{_ariaDisabled}}"
Expand Down
14 changes: 7 additions & 7 deletions packages/main/src/Slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ const metadata = {
* <h3>Structure</h3>
* The most important properties of the Slider are:
* <ul>
* <li>min - The minimum value of the slider range</li>
* <li>max - The maximum value of the slider range</li>
* <li>minValue - The minimum value of the slider range</li>
* <li>maxValue - The maximum value of the slider range</li>
* <li>value - The current value of the slider</li>
* <li>step - Determines the increments in which the slider will move</li>
* <li>showTooltip - Determines if a tooltip should be displayed above the handle</li>
Expand Down Expand Up @@ -211,7 +211,7 @@ class Slider extends SliderBase {
return;
}

const newValue = this.constructor.getValueFromInteraction(event, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);
const newValue = this.constructor.getValueFromInteraction(event, this._effectiveStep, this._effectiveMinValue, this._effectiveMaxValue, this.getBoundingClientRect(), this.directionStart);

this._updateHandleAndProgress(newValue);
this.updateValue("value", newValue);
Expand Down Expand Up @@ -244,8 +244,8 @@ class Slider extends SliderBase {
* @private
*/
_updateHandleAndProgress(newValue) {
const max = this._effectiveMax;
const min = this._effectiveMin;
const max = this._effectiveMaxValue;
const min = this._effectiveMinValue;

// The progress (completed) percentage of the slider.
this._progressPercentage = (newValue - min) / (max - min);
Expand All @@ -254,8 +254,8 @@ class Slider extends SliderBase {
}

_handleActionKeyPress(event) {
const min = this._effectiveMin;
const max = this._effectiveMax;
const min = this._effectiveMinValue;
const max = this._effectiveMaxValue;
const currentValue = this.value;
const newValue = isEscape(event) ? this._getInitialValue("value") : this.constructor.clipValue(this._handleActionKeyPressBase(event, "value") + currentValue, min, max);

Expand Down
48 changes: 25 additions & 23 deletions packages/main/src/SliderBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ const metadata = {
* @type {Float}
* @defaultvalue 0
* @public
* @since 1.0.0-rc.15
*/
min: {
minValue: {
type: Float,
defaultValue: 0,
},
Expand All @@ -34,13 +35,14 @@ const metadata = {
* @type {Float}
* @defaultvalue 100
* @public
* @since 1.0.0-rc.15
*/
max: {
maxValue: {
type: Float,
defaultValue: 100,
},
/**
* Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).
* Defines the size of the slider's selection intervals (e.g. minValue = 0, maxValue = 10, step = 5 would result in possible selection of the values 0, 5, 10).
* <br><br>
* <b>Note:</b> If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.
*
Expand Down Expand Up @@ -159,8 +161,8 @@ class SliderBase extends UI5Element {

this._stateStorage = {
step: null,
min: null,
max: null,
minValue: null,
maxValue: null,
labelInterval: null,
};
}
Expand Down Expand Up @@ -406,8 +408,8 @@ class SliderBase extends UI5Element {
* @protected
*/
handleDownBase(event) {
const min = this._effectiveMin;
const max = this._effectiveMax;
const min = this._effectiveMinValue;
const max = this._effectiveMaxValue;
const domRect = this.getBoundingClientRect();
const directionStart = this.directionStart;
const step = this._effectiveStep;
Expand Down Expand Up @@ -486,7 +488,7 @@ class SliderBase extends UI5Element {
}

/**
* Locks the given value between min and max boundaries based on slider properties
* Locks the given value between minValue and maxValue boundaries based on slider properties
*
* @protected
*/
Expand Down Expand Up @@ -582,20 +584,20 @@ class SliderBase extends UI5Element {
}

// Recalculate the tickmarks and labels and update the stored state.
if (this.isPropertyUpdated("min", "max", ...values)) {
this.storePropertyState("min", "max");
if (this.isPropertyUpdated("minValue", "maxValue", ...values)) {
this.storePropertyState("minValue", "maxValue");

// Here the value props are changed programatically (not by user interaction)
// and it won't be "stepified" (rounded to the nearest step). 'Clip' them within
// min and max bounderies and update the previous state reference.
// minValue and maxValue bounderies and update the previous state reference.
values.forEach(valueType => {
const normalizedValue = SliderBase.clipValue(this[valueType], this._effectiveMin, this._effectiveMax);
const normalizedValue = SliderBase.clipValue(this[valueType], this._effectiveMinValue, this._effectiveMaxValue);
this.updateValue(valueType, normalizedValue);
this.storePropertyState(valueType);
});
}

// Labels must be updated if any of the min/max/step/labelInterval props are changed
// Labels must be updated if any of the minValue/maxValue/step/labelInterval props are changed
if (this.labelInterval && this.showTickmarks) {
this._createLabels();
}
Expand Down Expand Up @@ -677,8 +679,8 @@ class SliderBase extends UI5Element {

// Convert number values to strings to let the CSS do calculations better
// rounding/subpixel behavior" and the most precise tickmarks distribution
const maxStr = String(this._effectiveMax);
const minStr = String(this._effectiveMin);
const maxStr = String(this._effectiveMaxValue);
const minStr = String(this._effectiveMinValue);
const stepStr = String(this._effectiveStep);
const tickmarkWidth = "1px";

Expand Down Expand Up @@ -712,7 +714,7 @@ class SliderBase extends UI5Element {

const labelInterval = this.labelInterval;
const step = this._effectiveStep;
const newNumberOfLabels = (this._effectiveMax - this._effectiveMin) / (step * labelInterval);
const newNumberOfLabels = (this._effectiveMaxValue - this._effectiveMinValue) / (step * labelInterval);

// If the required labels are already rendered
if (newNumberOfLabels === this._oldNumberOfLabels) {
Expand All @@ -732,7 +734,7 @@ class SliderBase extends UI5Element {
// "floor" the number of labels anyway.
for (let i = 0; i <= newNumberOfLabels; i++) {
// Format the label numbers with the same decimal precision as the value of the step property
const labelItemNumber = ((i * step * labelInterval) + this._effectiveMin).toFixed(stepPrecision);
const labelItemNumber = ((i * step * labelInterval) + this._effectiveMinValue).toFixed(stepPrecision);
this._labelValues.push(labelItemNumber);
}
}
Expand All @@ -742,8 +744,8 @@ class SliderBase extends UI5Element {
const isBigStep = SliderBase._isBigStepAction(event);

const currentValue = this[affectedValue];
const min = this._effectiveMin;
const max = this._effectiveMax;
const min = this._effectiveMinValue;
const max = this._effectiveMaxValue;

// If the action key corresponds to a long step and the slider has more than 10 normal steps,
// make a jump of 1/10th of the Slider's length, otherwise just use the normal step property.
Expand Down Expand Up @@ -828,12 +830,12 @@ class SliderBase extends UI5Element {
return step;
}

get _effectiveMin() {
return Math.min(this.min, this.max);
get _effectiveMinValue() {
return Math.min(this.minValue, this.maxValue);
}

get _effectiveMax() {
return Math.max(this.min, this.max);
get _effectiveMaxValue() {
return Math.max(this.minValue, this.maxValue);
}

get tabIndex() {
Expand Down
2 changes: 1 addition & 1 deletion packages/main/test/pages/AvatarGroup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@

<h1>Test your web components here</h1>

<ui5-slider id="slider" min="1" max="100" value="60" class="slider"></ui5-slider>
<ui5-slider id="slider" min-value="1" max-value="100" value="60" class="slider"></ui5-slider>

<div id="avatar-group-wrapper">

Expand Down
14 changes: 7 additions & 7 deletions packages/main/test/pages/RangeSlider.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,25 +44,25 @@
<h2>Basic Range Slider</h2>
<ui5-range-slider id="basic-range-slider" end-value="20"></ui5-range-slider>

<h2>Range Slider with custom min and max properties and tooltip</h2>
<ui5-range-slider id="basic-range-slider-with-tooltip" min="50" max="200" show-tooltip></ui5-range-slider>
<h2>Range Slider with custom minValue and maxValue properties and tooltip</h2>
<ui5-range-slider id="basic-range-slider-with-tooltip" min-value="50" max-value="200" show-tooltip></ui5-range-slider>

<h2>Range Slider with small step and tooltip</h2>
<ui5-range-slider id="range-slider-small-step-tooltips" min="0" max="44" step="0.0001" start-value="2" end-value="12" show-tooltip></ui5-range-slider>
<ui5-range-slider id="range-slider-small-step-tooltips" min-value="0" max-value="44" step="0.0001" start-value="2" end-value="12" show-tooltip></ui5-range-slider>

<h2>Range Slider with tickmarks</h2>
<ui5-range-slider id="range-slider-tickmarks" min="0" max="40" step="1" end-value="20" show-tickmarks></ui5-range-slider>
<ui5-range-slider id="range-slider-tickmarks" min-value="0" max-value="40" step="1" end-value="20" show-tickmarks></ui5-range-slider>

<h2>Disabled Range Slider</h2>
<ui5-range-slider id="disabled-range-slider" disabled min="0" max="30" step="0" start-value="3" end-value="13" show-tooltip></ui5-range-slider>
<ui5-range-slider id="disabled-range-slider" disabled min-value="0" max-value="30" step="0" start-value="3" end-value="13" show-tooltip></ui5-range-slider>

<h2 style="text-align: center;">Range Slider with steps, tooltips, tickmarks and labels</h2>
<ui5-range-slider id="range-slider-tickmarks-labels" min="0" max="44" step="2" start-value="2" end-value="12" show-tooltip label-interval="2" show-tickmarks style="width: 60%; margin-left: 20%; margin-top: 50px;"></ui5-range-slider>
<ui5-range-slider id="range-slider-tickmarks-labels" min-value="0" max-value="44" step="2" start-value="2" end-value="12" show-tooltip label-interval="2" show-tickmarks style="width: 60%; margin-left: 20%; margin-top: 50px;"></ui5-range-slider>
</section>

<section class="group">
<h2>Event Testing Slider</h2>
<ui5-range-slider id="test-slider" min="0" max="10" start-value="1" end-value="2"></ui5-range-slider>
<ui5-range-slider id="test-slider" min-value="0" max-value="10" start-value="1" end-value="2"></ui5-range-slider>
<h2>Event Testing Result Slider</h2>
<ui5-range-slider id="test-result-slider" start-value="1" end-value="2"></ui5-range-slider>
</section>
Expand Down
Loading