feat(kit): render the remaining ranges with UiSlider

UiSlider merges a caller's own input, change and blur handlers with its
own, leaves the input alone on a null model, and gains unstyled for a
range drawn as the browser's own. The rail card setting, observation
timeline, imagery opacity, Street Level date and Bhote Koshi split and
progress ranges now render through it. The timeline and the setting
ranges put the handle back once their owner has answered, since a drag
that ends where the slider last rendered leaves its model unchanged.

The radio tuner keeps its own input: its owner moves the handle back to
the selected station without changing the slot.

src/ui/recentImagery/RecentImageryReadout.vue

@@ -4,9 +4,9 @@ import { t } from '../../i18n/index.js';
 import UiSegmented from '../kit/UiSegmented.vue';
 import RailCardBlocks from '../rail/RailCardBlocks.vue';
 import RailCards from '../rail/RailCards.vue';
-import { vRangeValue } from '../rail/rangeValue.js';
 import RecentImageryCard from './RecentImageryCard.vue';
 import UiEmpty from '../kit/UiEmpty.vue';
+import UiSlider from '../kit/UiSlider.js';
 
 // Every block exists from the start, in its final order. The owner computes
 // the view and listens on the root; a mode choice calls `onSetMode`.
@@ -127,11 +127,10 @@ const modeOptions = computed(() =>
       ><label class="ri-opacity-label" for="ri-opacity"
         ><span>{{ t('OPACITY') }}</span
         ><span class="ri-opacity-value">{{ view.alpha }}%</span></label
-      ><input
+      ><UiSlider
         id="ri-opacity"
-        v-range-value="view.alpha"
-        type="range"
-        class="gev-quantitative-slider ri-opacity"
+        :model-value="view.alpha"
+        class="ri-opacity"
         min="0"
         max="100"
         step="1"