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/kit/UiSlider.js

@@ -1,10 +1,14 @@
-import { h, withDirectives } from 'vue';
+import { h, mergeProps, normalizeClass, withDirectives } from 'vue';
 import { vFieldValue } from '../rail/fieldValue.js';
 import { vRangeValue } from '../rail/rangeValue.js';
 
 // Server-rendered markup carries the model as the input's value.
 const ssrValue = ({ value }) => (value == null ? {} : { value });
-const LIVE = { ...vRangeValue, getSSRProps: ssrValue };
+// A null model leaves the input as it is.
+const live = (el, binding) => {
+  if (binding.value != null) vRangeValue.updated(el, binding);
+};
+const LIVE = { mounted: live, updated: live, getSSRProps: ssrValue };
 const HOLD = { ...vFieldValue, getSSRProps: ssrValue };
 
 /** Put the model back on a held input that lost focus. */
@@ -18,11 +22,14 @@ function takeModel(input, props) {
  * and disabled so the two kits can merge. Core keeps the native range input
  * (its keyboard, form and styling) where ui-vue draws a `role="slider"`
  * track. The input carries Core's `gev-quantitative-slider` class ahead of
- * the caller's, the caller's attributes come first, as in the markup this
- * replaced, and the accessible name comes as an `aria-label` attribute so
- * the attribute pass translates it. The value emits as a number.
+ * the caller's (`unstyled` leaves it off, for a range drawn as the browser's
+ * own), the caller's attributes come first, as in the markup this replaced,
+ * and the accessible name comes as an `aria-label` attribute so the attribute
+ * pass translates it. The value emits as a number, and a caller's own input,
+ * change or blur handler still reaches the input.
  *
- * The input takes the model's value only when it differs (`v-range-value`);
+ * The input takes the model's value only when it differs (`v-range-value`),
+ * and a null model leaves it as it is;
  * with `hold`, never while it is focused (`v-field-value`), so a render
  * cannot move a handle a person is dragging, and it takes the model back
  * when it loses focus: a model left unchanged renders nothing. Owners take
@@ -33,20 +40,27 @@ function takeModel(input, props) {
  */
 export default function UiSlider(props, { attrs, emit }) {
   const { class: className, ...rest } = attrs;
+  const classes = normalizeClass([
+    props.unstyled ? null : 'gev-quantitative-slider',
+    className,
+  ]);
   return withDirectives(
-    h('input', {
-      ...rest,
-      class: ['gev-quantitative-slider', className],
-      type: 'range',
-      min: props.min,
-      max: props.max,
-      step: props.step,
-      disabled: props.disabled,
-      onInput: (event) => emit('update:modelValue', Number(event.target.value)),
-      onBlur: props.hold
-        ? (event) => takeModel(event.target, props)
-        : undefined,
-    }),
+    h(
+      'input',
+      mergeProps(rest, {
+        class: classes || undefined,
+        type: 'range',
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        disabled: props.disabled,
+        onInput: (event) =>
+          emit('update:modelValue', Number(event.target.value)),
+        onBlur: props.hold
+          ? (event) => takeModel(event.target, props)
+          : undefined,
+      }),
+    ),
     [[props.hold ? HOLD : LIVE, props.modelValue]],
   );
 }
@@ -58,6 +72,7 @@ UiSlider.props = {
   step: { type: [Number, String], default: undefined },
   disabled: { type: Boolean, default: false },
   hold: { type: Boolean, default: false },
+  unstyled: { type: Boolean, default: false },
 };
 UiSlider.emits = ['update:modelValue'];
 UiSlider.inheritAttrs = false;

src/ui/kit/UiSlider.test.mjs

@@ -105,3 +105,35 @@ test('an input stays until the owner answers, however late', async () => {
     wrapper.unmount();
   }
 });
+
+test('a caller’s own input, change and blur handlers still run', async () => {
+  const seen = [];
+  const wrapper = mountSlider(
+    {},
+    {
+      onInput: (event) => seen.push(['input', event.target.value]),
+      onChange: () => seen.push(['change']),
+      onBlur: () => seen.push(['blur']),
+    },
+  );
+  const input = wrapper.get('input');
+  input.element.value = '55';
+  await input.trigger('input');
+  await input.trigger('change');
+  await input.trigger('blur');
+  assert.deepEqual(seen, [['input', '55'], ['change'], ['blur']]);
+  assert.deepEqual(wrapper.emitted('update:modelValue'), [[55]]);
+  wrapper.unmount();
+});
+
+test('a null model leaves the input, and unstyled leaves Core’s class off', async () => {
+  const wrapper = mountSlider({ modelValue: null, unstyled: true });
+  const input = wrapper.get('input');
+  assert.equal(input.attributes('class'), undefined);
+  input.element.value = '12';
+  await wrapper.setProps({ disabled: true });
+  assert.equal(input.element.value, '12');
+  await wrapper.setProps({ unstyled: false });
+  assert.equal(input.attributes('class'), 'gev-quantitative-slider');
+  wrapper.unmount();
+});

src/ui/rail/RailCardSetting.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
-import { vRangeValue } from './rangeValue.js';
 import RailChips from './RailChips.vue';
+import UiSlider from '../kit/UiSlider.js';
 
 // One setting: a chip group and an optional range. The handle's value is held
 // until the owner's next update; a range that commits on change keeps it
@@ -57,12 +57,23 @@ function rangeParams(input) {
   return { params: { [current.param]: next } };
 }
 
+// The handle shows the value again once the owner has answered: an owner
+// that clamps or refuses may leave the slider's model where it last
+// rendered, and then it would not render.
+function place(input) {
+  if (!range.value) return;
+  const next = String(value.value);
+  if (input.value !== next) input.value = next;
+}
+
 function onInput(event) {
   const params = rangeParams(event.target);
   if (!params) return;
   // The readout follows the handle at once, whether or not the owner redraws.
   draft.value = { range: range.value, value: Number(event.target.value) };
-  if (!range.value.commitOnChange) props.dispatch(params);
+  if (range.value.commitOnChange) return;
+  props.dispatch(params);
+  place(event.target);
 }
 
 function onChange(event) {
@@ -71,6 +82,7 @@ function onChange(event) {
   // Committed: the next update shows the owner's value, as before.
   if (draft.value) draft.value = { ...draft.value, committed: true };
   if (params) props.dispatch(params);
+  place(event.target);
 }
 </script>
 
@@ -83,14 +95,13 @@ function onChange(event) {
       ><span class="rail-card-setting-range-label" :hidden="!range.label">{{
         range.label || ''
       }}</span
-      ><input
-        type="range"
-        class="gev-quantitative-slider rail-card-setting-range"
+      ><UiSlider
+        class="rail-card-setting-range"
         :data-range-id="range.id || setting.id"
         :min="String(Number(range.min))"
         :max="String(Number(range.max))"
         :step="String(Number(range.step))"
-        v-range-value="String(value)"
+        :model-value="String(value)"
         :disabled="Boolean(range.disabled)"
         :aria-label="range.ariaLabel || setting.label"
         :aria-valuetext="valueText"

src/ui/rail/RailTimeline.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef, watch } from 'vue';
-import { vRangeValue } from './rangeValue.js';
 import { formatUtcDayMonth, t } from '../../i18n/index.js';
 import { utcClock } from './utcClock.js';
+import UiSlider from '../kit/UiSlider.js';
 
 // Stable native transport with local preview and a coalesced 150 ms drag
 // commit. While the handle is dragged the slider keeps the ticks it was
@@ -88,6 +88,13 @@ function preview(event) {
   if (typeof readout === 'string') shown.value = { ...shown.value, readout };
   if (timer === null) timer = setTimeout(commit, 150);
 }
+// The handle shows the shown index again. A drag that ends where it began
+// (an input and a cancel, or a refused commit, before the next render)
+// leaves the slider's model unchanged, so it would not render.
+const place = (input) => {
+  const index = String(shown.value.index);
+  if (input && input.value !== index) input.value = index;
+};
 function change(event) {
   if (props.state.disabled) return;
   const index = Number(event.target.value);
@@ -95,12 +102,14 @@ function change(event) {
   dragging = false;
   commit();
   sync();
+  place(event.target);
 }
-function reset() {
+function reset(event) {
   cancel();
   pending = null;
   dragging = false;
   sync();
+  place(event?.target);
 }
 function blur(event) {
   if (dragging) change(event);
@@ -122,13 +131,12 @@ const act = (fn) => {
         :disabled="disabled || state.index <= 0"
         @click="act(() => onStep(-1))"
         >‹</button
-      ><input
-        type="range"
-        :class="`gev-quantitative-slider${sliderClassName ? ` ${sliderClassName}` : ''}`"
+      ><UiSlider
+        :class="sliderClassName || undefined"
         min="0"
         :max="String(Math.max(0, shown.ticks.length - 1))"
         step="1"
-        v-range-value="String(shown.index)"
+        :model-value="String(shown.index)"
         :disabled="disabled"
         :aria-label="t('Observed history')"
         :aria-valuetext="utc(shown.ticks[shown.index])"

src/ui/railCards.test.mjs

@@ -123,6 +123,46 @@ test('footer buttons retain focus and current callbacks; links use safe new tabs
   button.click();
   assert.deepEqual(calls, [2]);
 });
+test('a live setting range whose owner clamps shows the clamped value', async () => {
+  const f = railFixture();
+  const model = (value) => ({
+    ...card,
+    blocks: [
+      {
+        id: 'settings',
+        type: 'settings',
+        settings: [
+          {
+            id: 'image',
+            label: 'IMAGE',
+            range: {
+              id: 'gain',
+              param: 'gain',
+              min: 0,
+              max: 100,
+              step: 1,
+              value,
+              ariaLabel: 'Gain',
+            },
+          },
+        ],
+      },
+    ],
+  });
+  // The owner takes at most 80 and answers at once.
+  const view = createRailCards({
+    ...f,
+    onParams: (_id, params) => view.update([model(Math.min(80, params.gain))]),
+  });
+  view.update([model(80)]);
+  await nextTick();
+  const slider = f.find((node) => node.dataset.rangeId === 'gain');
+  slider.value = '95';
+  slider.dispatchEvent(new Event('input'));
+  await nextTick();
+  assert.equal(slider.value, '80');
+  view.destroy();
+});
 test('setting ranges stay below presets and commit expensive filters on release', async () => {
   const f = railFixture();
   const calls = [];

src/ui/railTimeline.test.mjs

@@ -150,3 +150,29 @@ test('an update from inside the preview neither moves the handle back nor surviv
   assert.equal(slider.getAttribute('aria-valuetext'), '09-22 01:10 UTC');
   view.destroy();
 });
+test('a drag that ends where it began puts the handle back on the shown index', async (t) => {
+  t.mock.timers.enable({ apis: ['setTimeout'] });
+  const f = railFixture();
+  const commits = [];
+  const view = createRailTimeline({
+    ...f,
+    onCommit: (tick) => commits.push(tick),
+  });
+  view.update(props);
+  await nextTick();
+  const slider = f.find((n) => n.tagName === 'INPUT');
+  slider.value = '0';
+  slider.dispatchEvent(new Event('input'));
+  slider.dispatchEvent(new Event('pointercancel'));
+  await nextTick();
+  assert.equal(slider.value, '2', 'a cancelled drag');
+  assert.deepEqual(commits, []);
+  // A refused commit: the owner keeps its index.
+  slider.value = '1';
+  slider.dispatchEvent(new Event('input'));
+  slider.dispatchEvent(new Event('change'));
+  await nextTick();
+  assert.deepEqual(commits, [ticks[1]]);
+  assert.equal(slider.value, '2', 'a refused commit');
+  view.destroy();
+});

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"

src/ui/views/panels/BhoteKoshiPanel.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { t } from '../../../i18n/index.js';
 import { useBhoteKoshiPanelStore } from '../../stores/bhoteKoshiPanel.js';
+import UiSlider from '../../kit/UiSlider.js';
 
 // The Bhote Koshi reconstruction controls, at the end of the context rail,
 // as the event layer (src/data/bhoteKoshiEvent.js) presents them. Clicks and
@@ -29,7 +30,7 @@ const sliderValue = (event, scale) => Number(event.target.value) / scale;
         <span>{{ t('2021 HISTORICAL REFERENCE / 2026 POST-EVENT') }}</span>
         <span data-role="split-readout">{{ panel.refs.splitReadout.textContent }}</span>
       </div>
-      <input class="bhote-event-range" data-role="split" type="range" min="0" max="100" :value="panel.refs.splitInput.value" :aria-label="t('Historical reference and post-event image split')" @input="call('setSplit', sliderValue($event, 100))" />
+      <UiSlider class="bhote-event-range" unstyled data-role="split" min="0" max="100" :model-value="panel.refs.splitInput.value" :aria-label="t('Historical reference and post-event image split')" @update:model-value="call('setSplit', $event / 100)" />
       <div class="bhote-event-dates">
         <span data-role="before-date">{{ panel.beforeDate.date ? `${panel.beforeDate.name} · ` : panel.beforeDate.name }}<span v-if="panel.beforeDate.date" class="bhote-event-date">{{ panel.beforeDate.date }}</span></span>
         <span data-role="after-date">{{ panel.afterDate.date ? `${panel.afterDate.name} · ` : panel.afterDate.name }}<span v-if="panel.afterDate.date" class="bhote-event-date">{{ panel.afterDate.date }}</span></span>
@@ -40,7 +41,7 @@ const sliderValue = (event, scale) => Number(event.target.value) / scale;
         <span data-role="timeline-label">{{ panel.refs.timelineLabel.textContent }}</span>
         <span data-role="time">{{ panel.refs.time.textContent }}</span>
       </div>
-      <input class="bhote-event-range flood" data-role="progress" type="range" min="0" max="1000" :value="panel.refs.progressInput.value" :hidden="panel.refs.progressInput.hidden" :disabled="panel.refs.progressInput.disabled" :aria-label="panel.refs.progressInput.attributes['aria-label']" @input="call('previewProgress', sliderValue($event, 1000))" @change="call('commitProgress', sliderValue($event, 1000), { final: true })" />
+      <UiSlider class="bhote-event-range flood" unstyled data-role="progress" min="0" max="1000" :model-value="panel.refs.progressInput.value" :hidden="panel.refs.progressInput.hidden" :disabled="panel.refs.progressInput.disabled" :aria-label="panel.refs.progressInput.attributes['aria-label']" @update:model-value="call('previewProgress', $event / 1000)" @change="call('commitProgress', sliderValue($event, 1000), { final: true })" />
       <div class="bhote-event-story-nav" :aria-label="t('Story beat navigation')">
         <button type="button" data-action="previous-beat" :title="t('Previous story beat')" :aria-label="panel.refs.previousButton.attributes['aria-label']" :disabled="panel.refs.previousButton.disabled" @click="call('previousBeat')">‹</button>
         <div class="bhote-event-story-current">

src/ui/views/panels/StreetLevelPanel.vue

@@ -7,6 +7,7 @@ import UiSegmented from '../../kit/UiSegmented.vue';
 import RailPanel from '../../rail/RailPanel.vue';
 import RailChips from '../../rail/RailChips.vue';
 import { useStreetLevelStore } from '../../stores/streetLevel.js';
+import UiSlider from '../../kit/UiSlider.js';
 
 // The Street Level panel, rendered from what StreetLevelControls presents.
 // Until it renders, the panel shows its initial markup. The viewer element
@@ -116,7 +117,15 @@ const placeThumb = (el, { value: since, oldValue }) => {
     el.value = index;
   if (el.value === index) sinceLabel.value = since.label;
 };
-const vThumb = { mounted: placeThumb, updated: placeThumb };
+// The thumb starts at the first stop: a value attribute on the slider would
+// be written again on each of its renders.
+const vThumb = {
+  mounted(el, binding) {
+    el.value = '0';
+    placeThumb(el, binding);
+  },
+  updated: placeThumb,
+};
 </script>
 
 <template>
@@ -159,7 +168,7 @@ const vThumb = { mounted: placeThumb, updated: placeThumb };
         </div>
         <div id="sl-since-row" class="sl-since" :hidden="!shows.since">
           <label class="cctv-summary-label" for="sl-since" data-i18n>SINCE</label>
-          <input id="sl-since" v-thumb="view?.since" class="sl-range gev-quantitative-slider" type="range" min="0" max="8" step="1" value="0" :aria-valuetext="sinceLabel" aria-describedby="sl-since-label sl-since-note" @input="onSinceInput" @change="onSinceChange" />
+          <UiSlider id="sl-since" v-thumb="view?.since" class="sl-range" min="0" max="8" step="1" :aria-valuetext="sinceLabel" aria-describedby="sl-since-label sl-since-note" @input="onSinceInput" @change="onSinceChange" />
           <span class="sl-since-value">
             <output id="sl-since-label" class="sl-since-label" for="sl-since">{{ sinceLabel }}</output>
             <small id="sl-since-note" class="sl-since-note" :hidden="!view?.sinceNote">{{ view?.sinceNote || '' }}</small>