Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.
1.17.2
Bug summary
When minGap is explicitly set to 0 on uui-range-slider, the component ignores it and falls back to using step as the minimum gap between handles. This prevents both handles from selecting the same value (e.g. a range of "6 to 6"), which is a valid use case for range sliders representing filters like age ranges or price ranges.
Specifics
This currently blocks the Umbraco CMS slider from supporting zero-gap ranges. See Umbraco-CMS#22067 and Umbraco-CMS#22078.
Steps to reproduce
<uui-range-slider label="Test" min="0" max="10" step="1" .minGap=${0}></uui-range-slider>Try to drag both handles to the same value — the component enforces a minimum gap of 1 (the step value).
Bug details and resolution
If helpful, this is what Claude tells me is the root cause and approach to resolve:
Root cause
The component uses JavaScript truthiness checks to determine whether minGap was configured. Since 0 is falsy, it's indistinguishable from undefined (not set).
Affected locations in range-slider.element.ts:
1. _runGapChecks() — clears _minGap when it's less than step, but the guard this._minGap && already skips 0:
if (this._minGap && this._minGap < this._step) {
this._minGap = undefined;2. setValueLow() / setValueHigh() — falls back to step gap when minGap is falsy:
const clampMax = this.minGap
? this._highInputValue - this.minGap
: this._highInputValue - this.step;3. #transferValueToInternalValues() — same pattern, two occurrences:
this._minGap ? high - this._minGap : high - this._step
4. _runPropertiesChecks() — logs an error when both values are equal, even when that's intentionally allowed:
if (this._highInputValue === this._lowInputValue) {
console.error(`...Low-end and high-end value should never be equal...`);
}Suggested fix
Replace truthiness checks with !== undefined so that 0 is treated as an explicit value:
_runGapChecks():
// Before:
if (this._minGap && this._minGap < this._step) {
// After:
if (this._minGap !== undefined && this._minGap > 0 && this._minGap < this._step) {setValueLow():
// Before:
const clampMax = this.minGap
? this._highInputValue - this.minGap
: this._highInputValue - this.step;
// After:
const clampMax = this.minGap !== undefined
? this._highInputValue - this.minGap
: this._highInputValue - this.step;setValueHigh():
// Before:
const clampMin = this.minGap
? this._lowInputValue + this.minGap
: this._lowInputValue + this.step;
// After:
const clampMin = this.minGap !== undefined
? this._lowInputValue + this.minGap
: this._lowInputValue + this.step;#transferValueToInternalValues() (two occurrences):
// Before:
this._minGap ? high - this._minGap : high - this._step
// After:
this._minGap !== undefined ? high - this._minGap : high - this._step
// Before:
this._minGap
? this._lowInputValue + this._minGap
: this._lowInputValue + this._step
// After:
this._minGap !== undefined
? this._lowInputValue + this._minGap
: this._lowInputValue + this._step_runPropertiesChecks():
// Before:
if (this._highInputValue === this._lowInputValue) {
// After:
if (this._highInputValue === this._lowInputValue && this._minGap !== 0) {Expected result / actual result
Setting minGap=0 should explicitly allow both handles to overlap, selecting equal low and high values.
Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.
1.17.2
Bug summary
When
minGapis explicitly set to0onuui-range-slider, the component ignores it and falls back to usingstepas the minimum gap between handles. This prevents both handles from selecting the same value (e.g. a range of "6 to 6"), which is a valid use case for range sliders representing filters like age ranges or price ranges.Specifics
This currently blocks the Umbraco CMS slider from supporting zero-gap ranges. See Umbraco-CMS#22067 and Umbraco-CMS#22078.
Steps to reproduce
Try to drag both handles to the same value — the component enforces a minimum gap of
1(the step value).Bug details and resolution
If helpful, this is what Claude tells me is the root cause and approach to resolve:
Root cause
The component uses JavaScript truthiness checks to determine whether
minGapwas configured. Since0is falsy, it's indistinguishable fromundefined(not set).Affected locations in
range-slider.element.ts:1.
_runGapChecks()— clears_minGapwhen it's less thanstep, but the guardthis._minGap &&already skips0:2.
setValueLow()/setValueHigh()— falls back tostepgap whenminGapis falsy:3.
#transferValueToInternalValues()— same pattern, two occurrences:4.
_runPropertiesChecks()— logs an error when both values are equal, even when that's intentionally allowed:Suggested fix
Replace truthiness checks with
!== undefinedso that0is treated as an explicit value:_runGapChecks():setValueLow():setValueHigh():#transferValueToInternalValues()(two occurrences):_runPropertiesChecks():Expected result / actual result
Setting
minGap=0should explicitly allow both handles to overlap, selecting equal low and high values.