bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BaseSlider.md

@@ -0,0 +1,871 @@
+# BaseSlider
+
+## Template & Script
+
+```vue
+<template>
+	<span v-bind="outerContainerAttributes">
+		<slot :decrease="decrease" :increase="increase" name="prepend"></slot>
+		<span
+			ref="container"
+			v-bind="innerContainerAttributes"
+			class="bb-base-slider__slider-container"
+		>
+			<span v-if="ticks.length" class="bb-base-slider__ticks-container">
+				<span
+					v-for="tick in ticks"
+					:key="tick.value"
+					class="bb-base-slider__tick"
+					><slot
+						:active="tick.active"
+						name="tick"
+						:percent="tick.percent"
+						:value="tick.value"
+				/></span>
+			</span>
+			<input
+				:id="id"
+				class="sr-only"
+				:disabled="disabled"
+				:name="name"
+				:readonly="true"
+				:required="required"
+				:tabindex="-1"
+				:type="'text'"
+				:value="JSON.stringify(modelValue)"
+			/>
+			<span ref="track" class="bb-base-slider__track-container">
+				<span class="bb-base-slider__track-fill"></span>
+				<span v-bind="sliderBackgroundAttributes"></span>
+			</span>
+			<span
+				v-if="props.range"
+				v-bind="listeners"
+				key="thumblower"
+				ref="thumblower"
+				:aria-describedby="ariaDescribedby"
+				:aria-orientation="'horizontal'"
+				:aria-readonly="!readonly"
+				:aria-valuemax="max"
+				:aria-valuemin="min"
+				:aria-valuenow="valueNowLower"
+				:class="'bb-base-slider__thumb-container'"
+				data-thumb="lower"
+				:role="'slider'"
+				:style="{ left: `${internalValueLower}%` }"
+				:tabindex="disabled ? -1 : 0"
+				@focus="onFocus"
+				@keydown="onKeydown"
+			>
+				<span
+					:class="{
+						'bb-base-slider__thumb': true,
+						'bb-base-slider__thumb--lower': true,
+						'bb-base-slider__thumb--focused': targetThumb === 'lower',
+					}"
+					:style="{
+						transform: `translateY(-50%) ${thumbTranslate ? `translateX(-${internalValueLower}%)` : `translateX(-50%)`}`,
+						left: `${internalValueLower}%`,
+					}"
+					><slot
+						:focused="targetThumb === 'lower'"
+						name="thumb:lower"
+						:percent="internalValueLower"
+						:value="valueNowLower"
+						><slot
+							:focused="targetThumb === 'lower'"
+							name="thumb"
+							:percent="internalValueLower"
+							:value="valueNowLower" /></slot
+				></span>
+			</span>
+			<span
+				v-bind="listeners"
+				key="thumbhigher"
+				ref="thumbhigher"
+				:aria-describedby="ariaDescribedby"
+				:aria-orientation="'horizontal'"
+				:aria-readonly="!readonly"
+				:aria-valuemax="max"
+				:aria-valuemin="min"
+				:aria-valuenow="valueNowHigher"
+				:class="'bb-base-slider__thumb-container'"
+				data-thumb="higher"
+				:role="'slider'"
+				:style="{ left: `${internalValueHigher}%` }"
+				:tabindex="disabled ? -1 : 0"
+				@focus="onFocus"
+				@keydown="onKeydown"
+			>
+				<span
+					:class="{
+						'bb-base-slider__thumb': true,
+						'bb-base-slider__thumb--higher': true,
+						'bb-base-slider__thumb--focused': targetThumb === 'higher',
+					}"
+					:style="{
+						transform: `translateY(-50%) ${thumbTranslate ? `translateX(-${internalValueHigher}%)` : `translateX(-50%)`}`,
+						left: `${internalValueHigher}%`,
+					}"
+					><slot
+						:focused="targetThumb === 'higher'"
+						name="thumb:higher"
+						:percent="internalValueHigher"
+						:value="valueNowHigher"
+						><slot
+							:focused="targetThumb === 'higher'"
+							name="thumb"
+							:percent="internalValueHigher"
+							:value="valueNowHigher" /></slot
+				></span>
+			</span>
+		</span>
+		<slot :decrease="decrease" :increase="increase" name="append"></slot>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { head } from '@/utilities/functions/head';
+import { isCssColor } from '@/utilities/functions/isCssColor';
+import { isNil } from '@/utilities/functions/isNil';
+import {
+	getAsPercentage,
+	getAsPercentageBetween,
+	getValueFromPercentageInInterval,
+} from '@/utilities/functions/percentage';
+import { snapToStep } from '@/utilities/functions/snapToStep';
+import { last } from '@/utilities/functions/last';
+import { transpose } from '@/utilities/functions/transpose';
+import { clamp } from '@/utilities/functions/clamp';
+
+import type {
+	BaseSliderProps,
+	BaseSliderEvents,
+	BaseSliderSlots,
+} from './types';
+
+const props = withDefaults(defineProps<BaseSliderProps>(), {
+	maxPrecision: 2,
+	max: 100,
+	min: 0,
+	modelValue: 0,
+	step: 1,
+	thumbTranslate: true,
+});
+
+const emit = defineEmits<BaseSliderEvents>();
+
+defineSlots<BaseSliderSlots>();
+
+if (
+	props.min < Number.MIN_SAFE_INTEGER ||
+	props.max > Number.MAX_SAFE_INTEGER
+) {
+	throw new Error('BaseSlider min or max is too large');
+}
+
+const container = ref<HTMLElement>();
+const track = ref<HTMLElement>();
+const thumblower = ref<HTMLElement>();
+const thumbhigher = ref<HTMLElement>();
+const internalValueLower = ref(0);
+const internalValueHigher = ref(0);
+const valueNowLower = computed(() => {
+	if (Array.isArray(props.modelValue))
+		return head(props.modelValue) ?? undefined;
+	return isNil(props.modelValue) ? undefined : Number(props.modelValue);
+});
+const valueNowHigher = computed(() => {
+	if (Array.isArray(props.modelValue))
+		return last(props.modelValue) ?? undefined;
+	return isNil(props.modelValue) ? undefined : Number(props.modelValue);
+});
+const sortedInternalValues = computed(() => {
+	return [internalValueLower.value, internalValueHigher.value].sort(
+		(a, b) => a - b
+	);
+});
+
+const active = ref(false);
+
+if (props.range && !Array.isArray(props.modelValue)) {
+	throw new TypeError(
+		'BaseSlider mode is set as range but modelValue is not an array'
+	);
+}
+
+onMounted(() => {
+	if (props.autofocus) {
+		thumbhigher.value?.focus();
+	}
+});
+
+let thumbPressed = ref(false);
+let targetThumb = ref<'higher' | 'lower' | null>(null);
+
+const getTargetThumb = (event: FocusEvent) => {
+	if (thumbhigher.value && thumbhigher.value.contains(event.target as Node))
+		return 'higher';
+	if (thumblower.value && thumblower.value.contains(event.target as Node))
+		return 'lower';
+	throw new Error('Could not identify target thumb');
+};
+
+const onPointerdown = (event: PointerEvent) => {
+	if (props.disabled || props.readonly) return;
+	if (!targetThumb.value) {
+		targetThumb.value = getTargetThumb(event);
+	}
+	thumbPressed.value = true;
+	document.addEventListener('pointermove', onPointermove);
+	document.addEventListener('pointerup', onPointerup);
+	emit('pointerdown', event);
+};
+
+let listeners = computed(() => (thumbPressed.value ? {} : { onPointerdown }));
+
+const onPointermove = (event: PointerEvent | MouseEvent) => {
+	if (props.disabled || props.readonly) return;
+	if (track.value) {
+		if (event instanceof PointerEvent) {
+			emit('pointermove', event);
+		} else {
+			emit('click', event);
+		}
+		const trackPosition = track.value.getBoundingClientRect();
+		const clickOffset = event.clientX;
+		const trackStart = trackPosition.left;
+		const trackLength = trackPosition.width;
+
+		// Snap the value to the step
+		let transposedValue = transpose(
+			clickOffset,
+			trackStart,
+			trackStart + trackLength,
+			props.min,
+			props.max
+		);
+		const snappedValue = snapToStep(
+			transposedValue,
+			props.min,
+			props.max,
+			props.step
+		);
+
+		// Transform the snapped value back to a percentage so it matches the original intent
+		const adjustedPercent = getAsPercentageBetween(
+			snappedValue,
+			props.min,
+			props.max
+		);
+		const clampedPercent = clamp(adjustedPercent, 0, 100);
+		if (targetThumb.value === 'higher') {
+			internalValueHigher.value = clampedPercent;
+		} else if (targetThumb.value === 'lower') {
+			internalValueLower.value = clampedPercent;
+		}
+		emit('update:modelValue', getValueToEmit());
+	}
+};
+
+const getValueToEmit = () => {
+	if (props.range) {
+		return (
+			[
+				getValueFromPercentageInInterval(
+					internalValueLower.value,
+					props.min,
+					props.max
+				),
+				getValueFromPercentageInInterval(
+					internalValueHigher.value,
+					props.min,
+					props.max
+				),
+			]
+				.sort((a, b) => a - b)
+				// This prevents floating point precision issues like 10.000000000000002
+				.map((v) => Number(v.toFixed(props.maxPrecision)))
+		);
+	} else {
+		const value = getValueFromPercentageInInterval(
+			internalValueHigher.value,
+			props.min,
+			props.max
+		);
+		return Number(value.toFixed(props.maxPrecision));
+	}
+};
+
+const increase = () => {
+	if (props.disabled || props.readonly || props.range) return;
+	const initialValue = (props.modelValue as number | null) ?? 0;
+	const increased = initialValue + props.step;
+	const clamped = clamp(increased, props.min, props.max);
+	emit('update:modelValue', clamped);
+};
+
+const decrease = () => {
+	if (props.disabled || props.readonly || props.range) return;
+	const initialValue = (props.modelValue as number | null) ?? 0;
+	const decreased = initialValue - props.step;
+	const clamped = clamp(decreased, props.min, props.max);
+	emit('update:modelValue', clamped);
+};
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		if (props.range) {
+			if (!Array.isArray(value)) {
+				throw new Error('BaseSlider modelValue must be an array');
+			}
+			if (value.length !== 2) {
+				internalValueLower.value = 0;
+				internalValueHigher.value = 100;
+				return;
+			}
+			const sortedExternal = [...value].sort((a, b) => a - b);
+			const normalizedExternal = sortedExternal.map((v) =>
+				clamp(getAsPercentageBetween(v, props.min, props.max), 0, 100)
+			);
+			// Assign the values to the internal values based on which is closest
+			// this is useful so the user doesn't have to think about the thumbs position
+			if (internalValueLower.value > internalValueHigher.value) {
+				internalValueLower.value = normalizedExternal[1];
+				internalValueHigher.value = normalizedExternal[0];
+			} else {
+				internalValueLower.value = normalizedExternal[0];
+				internalValueHigher.value = normalizedExternal[1];
+			}
+		} else {
+			let newValue = (value as number | null) ?? props.min;
+			const transposed = transpose(newValue, props.min, props.max, 0, 100);
+			const clamped = clamp(transposed, 0, 100);
+			internalValueHigher.value = clamped;
+		}
+	},
+	{ immediate: true }
+);
+
+const onPointerup = (event: PointerEvent) => {
+	thumbPressed.value = false;
+	targetThumb.value = null;
+	document.removeEventListener('pointermove', onPointermove);
+	document.removeEventListener('pointerup', onPointerup);
+	emit('pointerup', event);
+};
+
+const proportionalStep = getAsPercentage(props.step, props.max - props.min);
+
+const onKeydown = (event: KeyboardEvent) => {
+	emit('keydown', event);
+	if (
+		props.disabled ||
+		props.readonly ||
+		(event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
+	) {
+		return;
+	}
+
+	if (event.key === 'ArrowLeft') {
+		if (
+			targetThumb.value === 'higher' ||
+			document.activeElement === thumbhigher.value ||
+			event.target === thumbhigher.value
+		) {
+			internalValueHigher.value = clamp(
+				internalValueHigher.value - proportionalStep,
+				0,
+				100
+			);
+		} else if (
+			targetThumb.value === 'lower' ||
+			document.activeElement === thumblower.value ||
+			event.target === thumblower.value
+		) {
+			internalValueLower.value = clamp(
+				internalValueLower.value - proportionalStep,
+				0,
+				100
+			);
+		}
+	} else if (event.key === 'ArrowRight') {
+		if (
+			targetThumb.value === 'higher' ||
+			document.activeElement === thumbhigher.value ||
+			event.target === thumbhigher.value
+		) {
+			internalValueHigher.value = clamp(
+				internalValueHigher.value + proportionalStep,
+				0,
+				100
+			);
+		} else if (
+			targetThumb.value === 'lower' ||
+			document.activeElement === thumblower.value ||
+			event.target === thumblower.value
+		) {
+			internalValueLower.value = clamp(
+				internalValueLower.value + proportionalStep,
+				0,
+				100
+			);
+		}
+	}
+	emit('update:modelValue', getValueToEmit());
+};
+
+const onFocus = (event: FocusEvent) => {
+	emit('focus', event);
+	const found = getTargetThumb(event);
+	if (found) targetThumb.value = found;
+	if (!active.value) {
+		active.value = true;
+		emit('active');
+		document.addEventListener('focusin', onDocumentInteraction);
+		document.addEventListener('click', onDocumentInteraction);
+	}
+};
+
+const onDocumentInteraction = (event: FocusEvent) => {
+	if (event.target instanceof HTMLElement) {
+		if (!container.value?.contains(event.target)) {
+			active.value = false;
+			targetThumb.value = null;
+			emit('inactive');
+			document.removeEventListener('focusin', onDocumentInteraction);
+			document.removeEventListener('click', onDocumentInteraction);
+		}
+	}
+};
+
+const outerContainerAttributes: Record<string, any> = computed(() => {
+	const base: Record<string, any> = {
+		class: {
+			'bb-base-slider': true,
+			'bb-base-slider--disabled': props.disabled,
+			'bb-base-slider--errors': props.hasErrors,
+			'bb-base-slider--readonly': props.readonly,
+			[`bb-base-slider--${props.color}`]:
+				props.color && !isCssColor(props.color),
+		},
+		style: {},
+	};
+	if (props.color && isCssColor(props.color)) {
+		base.style['--color'] = props.color;
+	}
+	return base;
+});
+
+const innerContainerAttributes: Record<string, any> = {
+	onPointerdown: (event: MouseEvent) => {
+		if (props.range) return;
+		thumbhigher.value?.focus();
+		onPointermove(event);
+		document.addEventListener('pointermove', onPointermove);
+		document.addEventListener('pointerup', onPointerup);
+	},
+};
+
+const sliderBackgroundAttributes = computed(() => {
+	const classes = 'bb-base-slider__track-background';
+	const style: Record<string, any> = {
+		width: `${sortedInternalValues.value[1] - sortedInternalValues.value[0]}%`,
+		left: `${sortedInternalValues.value[0]}%`,
+	};
+	return {
+		class: classes,
+		style,
+	};
+});
+
+type Tick = {
+	value: number;
+	percent: number;
+	active: boolean;
+};
+
+const isSelected = (value: number) => {
+	if (isNil(props.modelValue)) return false;
+
+	if (Array.isArray(props.modelValue)) {
+		if (props.modelValue.length === 0) return false;
+		return props.modelValue[0] <= value && props.modelValue[1] >= value;
+	}
+	return value <= Number(props.modelValue);
+};
+
+const ticks = computed<Tick[]>(() => {
+	if (!props.ticks) return [] as Tick[];
+	let ticks: Tick[] = [];
+	let current = props.min;
+	while (current <= props.max) {
+		let value = current;
+		const percent = getAsPercentageBetween(value, props.min, props.max);
+		const active = isSelected(value);
+		ticks.push({
+			value,
+			percent,
+			active,
+		});
+		current += props.step;
+	}
+	return ticks;
+});
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { InputHTMLAttributes, HTMLAttributes } from 'vue';
+
+/**
+ * Props for the slider component with range support, ticks, and keyboard navigation.
+ */
+export type BaseSliderProps = {
+	/**
+	 * Id(s) of elements describing this slider for assistive technologies.
+	 */
+	ariaDescribedby?: InputHTMLAttributes['aria-describedby'];
+
+	/**
+	 * Focus the slider on mount.
+	 */
+	autofocus?: InputHTMLAttributes['autofocus'];
+
+	/**
+	 * Define a color for the component.
+	 *
+	 * Either a custom color or a coded color in common HEX, RGB, etc... format.
+	 */
+	color?: string;
+
+	/**
+	 * Disable all interactions with the slider.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Apply error styling to the slider.
+	 */
+	hasErrors?: boolean;
+
+	/**
+	 * Explicit id for the slider container. Used to generate ids for thumbs.
+	 */
+	id?: HTMLAttributes['id'];
+
+	/**
+	 * Upper bound for slider values.
+	 * @defaultValue `100`
+	 */
+	max?: number;
+
+	/**
+	 * Maximum decimal places to retain in emitted values.
+	 * @defaultValue `2`
+	 */
+	maxPrecision?: number;
+
+	/**
+	 * Lower bound for slider values.
+	 * @defaultValue `0`
+	 */
+	min?: number;
+
+	/**
+	 * v-model value. Single number for single slider, two-element array for range.
+	 * @defaultValue `0`
+	 */
+	modelValue: number[] | number | string | null;
+
+	/**
+	 * Defines the name of the input.
+	 */
+	name?: InputHTMLAttributes['name'];
+
+	/**
+	 * Enable range selection with two thumbs. When true, modelValue must be an array.
+	 */
+	range?: boolean;
+
+	/**
+	 * Make the slider read-only while keeping it visible.
+	 */
+	readonly?: boolean;
+
+	/**
+	 * Mark the slider as required.
+	 */
+	required?: boolean;
+
+	/**
+	 * Granularity step for value changes via keyboard or pointer interaction.
+	 * @defaultValue `1`
+	 */
+	step?: number;
+
+	/**
+	 * Show tick marks at each step interval.
+	 */
+	ticks?: boolean;
+
+	/**
+	 * Translate thumbs proportionally to stay centered on the track.
+	 * Set to false when displaying ticks for better alignment.
+	 * @defaultValue `true`
+	 */
+	thumbTranslate?: boolean;
+};
+
+export type BaseSliderEvents = {
+	/**
+	 * Emitted when the slider gains focus and becomes interactive.
+	 */
+	(e: 'active'): void;
+	/**
+	 * Emitted when focus/click moves outside the slider after it was active.
+	 */
+	(e: 'inactive'): void;
+	/**
+	 * Emitted when the slider receives a click interaction.
+	 * Forwards the original DOM `MouseEvent`.
+	 */
+	(e: 'click', event: MouseEvent): void;
+	/**
+	 * Emitted when a thumb gains focus.
+	 * Forwards the original DOM `FocusEvent`.
+	 */
+	(e: 'focus', event: FocusEvent): void;
+	/**
+	 * Emitted for keyboard interaction on a thumb.
+	 * Forwards the original DOM `KeyboardEvent`.
+	 */
+	(e: 'keydown', event: KeyboardEvent): void;
+	/**
+	 * Emitted when a pointer device is pressed on a thumb.
+	 * Forwards the original DOM `PointerEvent`.
+	 */
+	(e: 'pointerdown', event: PointerEvent): void;
+	/**
+	 * Emitted as a pointer device moves while dragging a thumb.
+	 * Forwards the original DOM `PointerEvent`.
+	 */
+	(e: 'pointermove', event: PointerEvent): void;
+	/**
+	 * Emitted when a pointer device is released after dragging.
+	 * Forwards the original DOM `PointerEvent`.
+	 */
+	(e: 'pointerup', event: PointerEvent): void;
+	/**
+	 * Emitted with new value(s) whenever the slider position changes.
+	 * Single number for single slider, array for range mode.
+	 */
+	(e: 'update:modelValue', event: number | number[]): void;
+};
+
+/**
+ * Props exposed by the `thumb`, `thumb:higher`, and `thumb:lower` slots.
+ */
+export type BaseSliderThumbSlotProps = {
+	/**
+	 * The current value controlled by this thumb, or `undefined` if unset.
+	 */
+	value: number | undefined;
+	/**
+	 * The thumb's horizontal position as a percentage (0–100) along the track.
+	 */
+	percent: number;
+	/**
+	 * Whether this thumb currently has keyboard focus.
+	 */
+	focused: boolean;
+};
+
+/**
+ * Props exposed by the `append` and `prepend` slots.
+ */
+export type BaseSliderStepSlotProps = {
+	/**
+	 * Increments the value by one `step`.
+	 */
+	increase: () => void;
+	/**
+	 * Decrements the value by one `step`.
+	 */
+	decrease: () => void;
+};
+
+/**
+ * Props exposed by the `tick` slot.
+ */
+export type BaseSliderTickSlotProps = {
+	/**
+	 * The numeric value this tick represents.
+	 */
+	value: number;
+	/**
+	 * The tick's horizontal position as a percentage (0–100) along the track.
+	 */
+	percent: number;
+	/**
+	 * Whether the tick falls within the currently selected range/value.
+	 */
+	active: boolean;
+};
+
+export type BaseSliderSlots = {
+	/**
+	 * Replaces the default higher-value thumb in range mode (`range: true`).
+	 */
+	'thumb:higher': (props: BaseSliderThumbSlotProps) => any;
+	/**
+	 * Replaces the default lower-value thumb in range mode (`range: true`).
+	 */
+	'thumb:lower': (props: BaseSliderThumbSlotProps) => any;
+	/**
+	 * Content rendered after the slider track, typically used to add a max-value label or button.
+	 */
+	append: (props: BaseSliderStepSlotProps) => any;
+	/**
+	 * Content rendered before the slider track, typically used to add a min-value label or button.
+	 */
+	prepend: (props: BaseSliderStepSlotProps) => any;
+	/**
+	 * Fallback thumb used for non-range sliders (or inside `thumb:higher`/`thumb:lower` when not overridden separately).
+	 */
+	thumb: (props: BaseSliderThumbSlotProps) => any;
+	/**
+	 * Replaces the default tick mark rendered at each step when ticks are enabled.
+	 */
+	tick: (props: BaseSliderTickSlotProps) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-base-slider {
+	--padding: calc((var(--bb-slider-thumb) - var(--bb-slider-track)) / 2);
+	--color: var(--bb-primary);
+	--ring-color: color-mix(
+		in srgb,
+		var(--color),
+		transparent calc(100% - var(--bb-ring-opacity) * 100%)
+	);
+
+	--radius: var(--bb-radius);
+	align-items: center;
+	display: inline-flex;
+
+	&__slider-container {
+		display: block;
+		flex-grow: 1;
+		min-width: 100px;
+		padding-bottom: var(--padding);
+		padding-top: var(--padding);
+		position: relative;
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-khtml-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+
+	&.bb-base-slider--disabled {
+		.bb-base-slider__track-background {
+			background-color: color-mix(in srgb, var(--bb-panel), var(--bb-text) 40%);
+			cursor: not-allowed;
+		}
+		.bb-base-slider__track-fill {
+			background-color: var(--bb-panel-disabled);
+			cursor: not-allowed;
+		}
+		.bb-base-slider__thumb {
+			cursor: not-allowed;
+		}
+	}
+
+	input[type='number'] {
+	}
+
+	&__track-container {
+		display: block;
+		height: var(--bb-slider-track);
+		position: relative;
+	}
+
+	&__track-background {
+		background-color: var(--color);
+		border-bottom-left-radius: var(--radius);
+		border-top-left-radius: var(--radius);
+		cursor: pointer;
+		display: block;
+		height: 100%;
+		left: 0;
+		position: absolute;
+		top: 0;
+	}
+
+	&__track-fill {
+		background-color: color-mix(in srgb, var(--bb-panel) 92%, var(--bb-text));
+		border-radius: var(--radius);
+		cursor: pointer;
+		display: block;
+		height: 100%;
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 100%;
+	}
+
+	&__thumb-container {
+		display: block;
+		position: absolute;
+		top: 50%;
+
+		&:focus {
+			.bb-base-slider__thumb {
+				box-shadow: 0px 0px 0px var(--bb-ring-size) var(--ring-color);
+			}
+		}
+	}
+
+	&__thumb {
+		background-color: var(--bb-panel);
+		border: 1px solid var(--bb-border);
+		border-radius: 999px;
+		box-shadow: 0px 0px 0px 0px var(--bb-ring);
+		cursor: pointer;
+		display: block;
+		height: var(--bb-slider-thumb);
+		position: absolute;
+		top: 50%;
+		touch-action: none;
+		transition-duration: 150ms;
+		transition-property: box-shadow;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		width: var(--bb-slider-thumb);
+	}
+
+	&__ticks-container {
+		display: flex;
+		justify-content: space-between;
+		position: absolute;
+		top: 100%;
+		width: 100%;
+	}
+
+	&__tick {
+		position: relative;
+	}
+}
+```