diff --git a/packages/calcite-components/src/components/slider/resources.ts b/packages/calcite-components/src/components/slider/resources.ts index 331ff5efc46..6077a2a6d8e 100644 --- a/packages/calcite-components/src/components/slider/resources.ts +++ b/packages/calcite-components/src/components/slider/resources.ts @@ -5,3 +5,5 @@ export const CSS = { tickMin: "tick__label--min", tickMax: "tick__label--max", }; + +export const maxTickElementThreshold = 250; diff --git a/packages/calcite-components/src/components/slider/slider.stories.ts b/packages/calcite-components/src/components/slider/slider.stories.ts index 34ec79ed0a2..727510e2d1f 100644 --- a/packages/calcite-components/src/components/slider/slider.stories.ts +++ b/packages/calcite-components/src/components/slider/slider.stories.ts @@ -393,3 +393,24 @@ export const WithLargeFontSize_TestOnly = (): string => html` `; + +export const maxTickRendering_TestOnly = (): string => html` + + + + + + + + + + + + + + +`; diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx index 9df2de70970..7167b4fd5b2 100644 --- a/packages/calcite-components/src/components/slider/slider.tsx +++ b/packages/calcite-components/src/components/slider/slider.tsx @@ -29,7 +29,7 @@ import { updateHostInteraction, } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; -import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { componentFocusable, LoadableComponent, @@ -46,7 +46,7 @@ import { import { clamp, decimalPlaces } from "../../utils/math"; import { ColorStop, DataSeries } from "../graph/interfaces"; import { Scale } from "../interfaces"; -import { CSS } from "./resources"; +import { CSS, maxTickElementThreshold } from "./resources"; type ActiveSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue"; type SetValueProperty = Exclude; @@ -1031,13 +1031,33 @@ export class Slider ); } + private getTickDensity(): number { + const density = (this.max - this.min) / this.ticks / maxTickElementThreshold; + + return density < 1 ? 1 : density; + } + private generateTickValues(): number[] { - const ticks = []; + const tickInterval = this.ticks ?? 0; + + if (tickInterval <= 0) { + return []; + } + + const ticks: number[] = [this.min]; + const density = this.getTickDensity(); + const tickOffset = tickInterval * density; let current = this.min; - while (this.ticks && current < this.max + this.ticks) { + + while (current < this.max) { + current += tickOffset; ticks.push(Math.min(current, this.max)); - current = current + this.ticks; } + + if (!ticks.includes(this.max)) { + ticks.push(this.max); + } + return ticks; }