refactor layout

src/ui/src/components/core/base/BaseInputSlider.vue

@@ -1,15 +1,10 @@
 <template>
-	<div
-		role="slider"
-		:aria-valuemin="min"
-		:aria-valuemax="max"
+	<BaseInputSliderLayout
+		:min="min"
+		:max="max"
+		:popover-display-mode="popoverDisplayMode"
 		:aria-valuenow="value"
 		:aria-valuetext="`${displayValue} (${Math.round(progress)}%)`"
-		class="BaseInputRange"
-		:class="{
-			'BaseInputRange--popover-always-visible':
-				popoverDisplayMode === 'always',
-		}"
 	>
 		<div ref="slider" class="BaseInputRange__slider">
 			<div
@@ -26,14 +21,14 @@
 			:slider-bounding-rect="sliderBoundingRect"
 			@update:value="model = $event"
 		/>
-	</div>
+	</BaseInputSliderLayout>
 </template>
 
 <script setup lang="ts">
 import { computed, PropType, ref } from "vue";
 import BaseInputRangeThumb from "./BaseInputSliderThumb.vue";
+import BaseInputSliderLayout from "./BaseInputSliderLayout.vue";
 import { useBoudingClientRect } from "@/composables/useBoundingClientRect";
-import value from "arquero/dist/types/format/value";
 
 const thumbRadius = 9;
 
@@ -65,32 +60,3 @@ const progress = computed(() => {
 
 const sliderBoundingRect = useBoudingClientRect(slider);
 </script>
-
-<style scoped>
-.BaseInputRange {
-	--thumb-color: var(--accentColor);
-	--thumb-shadow-color: rgba(228, 231, 237, 0.4);
-	--slider-color: var(--softenedAccentColor);
-	--slider-bg-color: var(--separatorColor);
-	--popover-bg-color: var(--popoverBackgroundColor, rgba(0, 0, 0, 1));
-	width: 100%;
-
-	position: relative;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-
-.BaseInputRange__slider {
-	height: 8px;
-	width: 100%;
-	border-radius: 4px;
-	background-color: var(--slider-bg-color);
-}
-
-.BaseInputRange__slider__progress {
-	height: 100%;
-	max-width: 100%;
-	border-radius: 4px;
-	background-color: var(--slider-color);
-}
-</style>

src/ui/src/components/core/base/BaseInputSliderLayout.vue

@@ -0,0 +1,56 @@
+<template>
+	<div
+		role="slider"
+		:aria-valuemin="min"
+		:aria-valuemax="max"
+		class="BaseInputRange"
+		:class="{
+			'BaseInputRange--popover-always-visible':
+				popoverDisplayMode === 'always',
+		}"
+	>
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from "vue";
+
+defineProps({
+	min: { type: Number, default: 0 },
+	max: { type: Number, default: 100 },
+	popoverDisplayMode: {
+		type: String as PropType<"always" | "onChange">,
+		default: "onChange",
+	},
+});
+</script>
+
+<style scoped>
+.BaseInputRange {
+	--thumb-color: var(--accentColor);
+	--thumb-shadow-color: rgba(228, 231, 237, 0.4);
+	--slider-color: var(--softenedAccentColor);
+	--slider-bg-color: var(--separatorColor);
+	--popover-bg-color: var(--popoverBackgroundColor, rgba(0, 0, 0, 1));
+	width: 100%;
+
+	position: relative;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+
+>>> .BaseInputRange__slider {
+	height: 8px;
+	width: 100%;
+	border-radius: 4px;
+	background-color: var(--slider-bg-color);
+}
+
+>>> .BaseInputRange__slider__progress {
+	height: 100%;
+	max-width: 100%;
+	border-radius: 4px;
+	background-color: var(--slider-color);
+}
+</style>

src/ui/src/components/core/base/BaseInputSliderRange.vue

@@ -1,14 +1,10 @@
 <template>
-	<div
-		role="slider"
-		:aria-valuemin="min"
-		:aria-valuemax="max"
+	<BaseInputSliderLayout
+		class="BaseInputRangeSlider"
+		:min="min"
+		:max="max"
+		:popover-display-mode="popoverDisplayMode"
 		:aria-valuetext="displayValue"
-		class="BaseInputRange"
-		:class="{
-			'BaseInputRange--popover-always-visible':
-				popoverDisplayMode === 'always',
-		}"
 	>
 		<div ref="slider" class="BaseInputRange__slider">
 			<div
@@ -20,30 +16,24 @@
 			></div>
 		</div>
 		<BaseInputRangeThumb
-			:value="value[0]"
+			v-for="key in [0, 1]"
+			:key="key"
+			:value="value[key]"
 			:min="min"
 			:max="max"
 			:step="step"
 			:popover-display-mode="popoverDisplayMode"
 			:slider-bounding-rect="sliderBoundingRect"
-			@update:value="onUpdate(0, $event)"
+			@update:value="onUpdate(key ? 1 : 0, $event)"
 		/>
-		<BaseInputRangeThumb
-			:value="value[1]"
-			:min="min"
-			:max="max"
-			:step="step"
-			:popover-display-mode="popoverDisplayMode"
-			:slider-bounding-rect="sliderBoundingRect"
-			@update:value="onUpdate(1, $event)"
-		/>
-	</div>
+	</BaseInputSliderLayout>
 </template>
 
 <script setup lang="ts">
 import { computed, PropType, ref } from "vue";
 import BaseInputRangeThumb from "./BaseInputSliderThumb.vue";
 import { useBoudingClientRect } from "@/composables/useBoundingClientRect";
+import BaseInputSliderLayout from "./BaseInputSliderLayout.vue";
 
 const thumbRadius = 9;
 
@@ -92,32 +82,3 @@ const progress = computed(() => {
 
 const sliderBoundingRect = useBoudingClientRect(slider);
 </script>
-
-<style scoped>
-.BaseInputRange {
-	--thumb-color: var(--accentColor);
-	--thumb-shadow-color: rgba(228, 231, 237, 0.4);
-	--slider-color: var(--softenedAccentColor);
-	--slider-bg-color: var(--separatorColor);
-	--popover-bg-color: var(--popoverBackgroundColor, rgba(0, 0, 0, 1));
-	width: 100%;
-
-	position: relative;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-
-.BaseInputRange__slider {
-	height: 8px;
-	width: 100%;
-	border-radius: 4px;
-	background-color: var(--slider-bg-color);
-}
-
-.BaseInputRange__slider__progress {
-	height: 100%;
-	max-width: 100%;
-	border-radius: 4px;
-	background-color: var(--slider-color);
-}
-</style>

src/ui/src/components/core/input/CoreSliderRangeInput.vue

@@ -27,9 +27,9 @@ const description =
 const onChangeHandlerStub = `
 def onchange_handler(state, payload):
 
-	# Set the state variable "new_val" to the new value
-
-	state["new_val"] = payload`;
+	# Set the state variables "from" & "to" to the new range
+	state["from"] = payload[0]
+	state["to"] = payload[1]`;
 
 export default {
 	writer: {