From 0ae2d084f47b4de8426f223d97e378f9fda5b8aa Mon Sep 17 00:00:00 2001 From: Will Miao Date: Tue, 13 Jan 2026 16:16:11 +0800 Subject: [PATCH] feat(lora-randomizer): add segmented scale mode to strength sliders - Add `scaleMode` and `segments` props to DualRangeSlider component - Implement segmented scale visualization with configurable segment widths - Define strength segments for model and clip strength sliders with expanded middle range - Enable finer control in common value ranges via wheel step multipliers --- .../LoraRandomizerSettingsView.vue | 10 + .../src/components/shared/DualRangeSlider.vue | 181 ++++++++++-- .../vue-widgets/lora-manager-widgets.js | 268 +++++++++++++----- .../vue-widgets/lora-manager-widgets.js.map | 2 +- 4 files changed, 373 insertions(+), 88 deletions(-) diff --git a/vue-widgets/src/components/lora-randomizer/LoraRandomizerSettingsView.vue b/vue-widgets/src/components/lora-randomizer/LoraRandomizerSettingsView.vue index fd6138bd..bc144be3 100644 --- a/vue-widgets/src/components/lora-randomizer/LoraRandomizerSettingsView.vue +++ b/vue-widgets/src/components/lora-randomizer/LoraRandomizerSettingsView.vue @@ -65,6 +65,8 @@ :value-max="modelStrengthMax" :step="0.1" :default-range="{ min: -2, max: 3 }" + :scale-mode="'segmented'" + :segments="strengthSegments" @update:value-min="$emit('update:modelStrengthMin', $event)" @update:value-max="$emit('update:modelStrengthMax', $event)" /> @@ -98,6 +100,8 @@ :value-max="clipStrengthMax" :step="0.1" :default-range="{ min: -1, max: 2 }" + :scale-mode="'segmented'" + :segments="strengthSegments" :disabled="isClipStrengthDisabled" @update:value-min="$emit('update:clipStrengthMin', $event)" @update:value-max="$emit('update:clipStrengthMax', $event)" @@ -174,6 +178,12 @@ import SingleSlider from '../shared/SingleSlider.vue' import DualRangeSlider from '../shared/DualRangeSlider.vue' import type { LoraEntry } from '../../composables/types' +const strengthSegments = [ + { min: -10, max: -2, widthPercent: 20 }, + { min: -2, max: 2, widthPercent: 60, wheelStepMultiplier: 0.5 }, + { min: 2, max: 10, widthPercent: 20 } +] + defineProps<{ countMode: 'fixed' | 'range' countFixed: number diff --git a/vue-widgets/src/components/shared/DualRangeSlider.vue b/vue-widgets/src/components/shared/DualRangeSlider.vue index 17d46d33..bedf8cdd 100644 --- a/vue-widgets/src/components/shared/DualRangeSlider.vue +++ b/vue-widgets/src/components/shared/DualRangeSlider.vue @@ -1,8 +1,23 @@