fix(tours): the 3D relief slider uses the app's range style

This commit is contained in:
Maurice
2026-10-14 21:14:28 +02:00
parent d118c3cee9
commit 1d090e0ac9
@@ -1,6 +1,6 @@
import type { FerrataBbox } from '@trek/shared';
import { ChevronDown, ChevronUp, Gauge, Palette, Pause, Play, RotateCcw, Scan, TrendingUp } from 'lucide-react';
import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';
import { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
import { useTranslation } from '../../../i18n';
import type { DistanceUnit } from '../../../types';
import type { DistanceIndexedProfileSample, RouteProfileFocus } from '../../../utils/routeGeometry';
@@ -221,7 +221,8 @@ function TerrainDock({ terrain }: { terrain: Omit<ReturnType<typeof useTourTerra
value={terrain.exaggeration}
aria-label={t('tours.terrain.exaggeration')}
onChange={(e) => terrain.setExaggeration(Number(e.target.value))}
className="w-20 accent-[var(--accent)]"
className="trek-range !w-20"
style={{ '--fill': `${((terrain.exaggeration - 1) / 2) * 100}%` } as CSSProperties}
/>
<span className="w-7 font-semibold tabular-nums">{terrain.exaggeration.toFixed(1)}×</span>
</label>