diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index f557fd59f..1fbfbe6a5 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -30,6 +30,7 @@ Components with the Experimental badge sh
- Fixed a bug in `` where its value would revert to `""` when checked / unchecked [pr:1547]
- Fixed a bug that caused icon button labels to not render in frameworks [issue:1542]
- Fixed a bug in `` that caused the `name` property not to reflect [pr:1538]
+- Modified `` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
- Fixed a bug in `` and `` that prevented focus from being set on the dialog/drawer when opened [issue:1302]
- Fixed an overflow style that was causing tab group content to be unnecessarily truncated [issue:1401]
- Fixed a bug in `` that caused icon buttons to render when non-text nodes were slotted in [issue:1475]
diff --git a/packages/webawesome/src/components/slider/slider.ts b/packages/webawesome/src/components/slider/slider.ts
index c50f4f60c..3cb49053e 100644
--- a/packages/webawesome/src/components/slider/slider.ts
+++ b/packages/webawesome/src/components/slider/slider.ts
@@ -1,6 +1,6 @@
import type { PropertyValues } from 'lit';
import { html } from 'lit';
-import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { DraggableElement } from '../../internal/drag.js';
import { clamp } from '../../internal/math.js';
@@ -99,7 +99,6 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
@query('#thumb-max') thumbMax: HTMLElement;
@query('#track') track: HTMLElement;
@query('#tooltip') tooltip: WaTooltip;
- @queryAll('wa-tooltip') tooltips: NodeListOf;
/**
* The slider's label. If you need to provide HTML in the label, use the `label` slot instead.
@@ -688,19 +687,29 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
}
private showRangeTooltips() {
- if (this.withTooltip) {
- this.tooltips.forEach(tooltip => {
- tooltip.open = true;
- });
+ if (!this.withTooltip) return;
+
+ // Show only the active tooltip, hide the other
+ const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
+ const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
+
+ if (this.activeThumb === 'min') {
+ if (tooltipMin) tooltipMin.open = true;
+ if (tooltipMax) tooltipMax.open = false;
+ } else if (this.activeThumb === 'max') {
+ if (tooltipMax) tooltipMax.open = true;
+ if (tooltipMin) tooltipMin.open = false;
}
}
private hideRangeTooltips() {
- if (this.withTooltip) {
- this.tooltips.forEach(tooltip => {
- tooltip.open = false;
- });
- }
+ if (!this.withTooltip) return;
+
+ const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
+ const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
+
+ if (tooltipMin) tooltipMin.open = false;
+ if (tooltipMax) tooltipMax.open = false;
}
/** Updates the form value submission for range sliders */