replace el-slider with Slider component

src/components/ui/slider/Slider.vue

@@ -0,0 +1,56 @@
+<script setup>
+    import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        defaultValue: { type: Array, required: false },
+        modelValue: { type: [Array, null], required: false },
+        disabled: { type: Boolean, required: false },
+        orientation: { type: String, required: false },
+        dir: { type: String, required: false },
+        inverted: { type: Boolean, required: false },
+        min: { type: Number, required: false },
+        max: { type: Number, required: false },
+        step: { type: Number, required: false },
+        minStepsBetweenThumbs: { type: Number, required: false },
+        thumbAlignment: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        name: { type: String, required: false },
+        required: { type: Boolean, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits(['update:modelValue', 'valueCommit']);
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <SliderRoot
+        v-slot="{ modelValue }"
+        data-slot="slider"
+        :class="
+            cn(
+                'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+                props.class
+            )
+        "
+        v-bind="forwarded">
+        <SliderTrack
+            data-slot="slider-track"
+            class="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5">
+            <SliderRange
+                data-slot="slider-range"
+                class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
+        </SliderTrack>
+
+        <SliderThumb
+            v-for="(_, key) in modelValue"
+            :key="key"
+            data-slot="slider-thumb"
+            class="bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
+    </SliderRoot>
+</template>

src/components/ui/slider/index.js

@@ -0,0 +1 @@
+export { default as Slider } from './Slider.vue';

src/views/Charts/components/InstanceActivity.vue

@@ -33,18 +33,16 @@
                             </TooltipWrapper>
                         </div>
                     </PopoverTrigger>
-                    <PopoverContent side="bottom" class="w-[250px]">
+                    <PopoverContent side="bottom" class="w-62.5">
                         <div class="settings">
                             <div>
                                 <span>{{ t('view.charts.instance_activity.settings.bar_width') }}</span>
                                 <div>
-                                    <el-slider
+                                    <Slider
-                                        v-model.lazy="barWidth"
+                                        v-model="barWidthDraftValue"
                                         :max="50"
                                         :min="1"
-                                        @change="
+                                        @valueCommit="handleBarWidthCommit"></Slider>
-                                            (value) => changeBarWidth(value, () => handleEchartsRerender())
-                                        "></el-slider>
                                 </div>
                             </div>
                             <div>
@@ -126,8 +124,8 @@
 </template>
 
 <script setup>
+    import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
     import { ArrowLeft, ArrowRight, InfoFilled, Refresh, Setting, WarningFilled } from '@element-plus/icons-vue';
-    import { nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -136,6 +134,7 @@
     import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover';
     import { useAppearanceSettingsStore, useFriendStore, useUserStore } from '../../../stores';
     import { parseLocation, timeToText } from '../../../shared/utils';
+    import { Slider } from '../../../components/ui/slider';
     import { Switch } from '../../../components/ui/switch';
     import { useActivityDataProcessor } from '../composables/useActivityDataProcessor';
     import { useChartHelpers } from '../composables/useChartHelpers';
@@ -194,6 +193,27 @@
         changeIsNoFriendInstanceVisible,
         handleChangeSettings
     } = useInstanceActivitySettings();
+    const barWidthDraft = ref(barWidth.value);
+    const barWidthDraftValue = computed({
+        get: () => [barWidthDraft.value],
+        set: (value) => {
+            const next = value?.[0];
+            if (typeof next === 'number') {
+                barWidthDraft.value = next;
+            }
+        }
+    });
+
+    function handleBarWidthCommit(value) {
+        changeBarWidth(value?.[0] ?? barWidthDraft.value, () => handleEchartsRerender());
+    }
+
+    watch(
+        () => barWidth.value,
+        (value) => {
+            barWidthDraft.value = value;
+        }
+    );
 
     const {
         activityData,

src/views/Favorites/FavoritesAvatar.vue

@@ -26,13 +26,12 @@
                                     <span>Scale</span>
                                     <span class="favorites-dropdown__control-value">{{ avatarCardScalePercent }}%</span>
                                 </div>
-                                <el-slider
+                                <Slider
-                                    v-model="avatarCardScale"
+                                    v-model="avatarCardScaleValue"
                                     class="favorites-dropdown__slider"
                                     :min="avatarCardScaleSlider.min"
                                     :max="avatarCardScaleSlider.max"
-                                    :step="avatarCardScaleSlider.step"
+                                    :step="avatarCardScaleSlider.step" />
-                                    :show-tooltip="false" />
                             </li>
                             <li class="favorites-dropdown__control" @click.stop>
                                 <div class="favorites-dropdown__control-header">
@@ -41,13 +40,12 @@
                                         {{ avatarCardSpacingPercent }}%
                                     </span>
                                 </div>
-                                <el-slider
+                                <Slider
-                                    v-model="avatarCardSpacing"
+                                    v-model="avatarCardSpacingValue"
                                     class="favorites-dropdown__slider"
                                     :min="avatarCardSpacingSlider.min"
                                     :max="avatarCardSpacingSlider.max"
-                                    :step="avatarCardSpacingSlider.step"
+                                    :step="avatarCardSpacingSlider.step" />
-                                    :show-tooltip="false" />
                             </li>
                             <el-dropdown-item @click="handleAvatarImportClick">
                                 {{ t('view.favorite.import') }}
@@ -106,7 +104,7 @@
                                                     circle
                                                     @click.stop></el-button>
                                             </PopoverTrigger>
-                                            <PopoverContent side="right" class="w-[220px] p-1 rounded-lg">
+                                            <PopoverContent side="right" class="w-55 p-1 rounded-lg">
                                                 <div class="favorites-group-menu">
                                                     <button
                                                         type="button"
@@ -220,7 +218,7 @@
                                                         circle
                                                         @click.stop></el-button>
                                                 </PopoverTrigger>
-                                                <PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
+                                                <PopoverContent side="right" class="w-50 p-1 rounded-lg">
                                                     <div class="favorites-group-menu">
                                                         <button
                                                             type="button"
@@ -284,7 +282,7 @@
                                 <PopoverTrigger asChild>
                                     <el-button text size="small" :icon="MoreFilled" circle @click.stop></el-button>
                                 </PopoverTrigger>
-                                <PopoverContent side="right" class="w-[180px] p-1 rounded-lg">
+                                <PopoverContent side="right" class="w-45 p-1 rounded-lg">
                                     <div class="favorites-group-menu">
                                         <button
                                             type="button"
@@ -493,6 +491,7 @@
     import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
     import { avatarRequest, favoriteRequest } from '../../api';
     import { Badge } from '../../components/ui/badge';
+    import { Slider } from '../../components/ui/slider';
     import { Switch } from '../../components/ui/switch';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
 
@@ -573,6 +572,24 @@
 
     const avatarCardScalePercent = computed(() => Math.round(avatarCardScale.value * 100));
     const avatarCardSpacingPercent = computed(() => Math.round(avatarCardSpacing.value * 100));
+    const avatarCardScaleValue = computed({
+        get: () => [avatarCardScale.value],
+        set: (value) => {
+            const next = value?.[0];
+            if (typeof next === 'number') {
+                avatarCardScale.value = next;
+            }
+        }
+    });
+    const avatarCardSpacingValue = computed({
+        get: () => [avatarCardSpacing.value],
+        set: (value) => {
+            const next = value?.[0];
+            if (typeof next === 'number') {
+                avatarCardSpacing.value = next;
+            }
+        }
+    });
 
     const avatarExportDialogVisible = ref(false);
     const avatarFavoriteSearch = ref('');

src/views/Favorites/FavoritesFriend.vue

@@ -28,13 +28,12 @@
                                         {{ friendCardScalePercent }}%
                                     </span>
                                 </div>
-                                <el-slider
+                                <Slider
-                                    v-model="friendCardScale"
+                                    v-model="friendCardScaleValue"
                                     class="favorites-dropdown__slider"
                                     :min="friendCardScaleSlider.min"
                                     :max="friendCardScaleSlider.max"
-                                    :step="friendCardScaleSlider.step"
+                                    :step="friendCardScaleSlider.step" />
-                                    :show-tooltip="false" />
                             </li>
                             <li class="favorites-dropdown__control" @click.stop>
                                 <div class="favorites-dropdown__control-header">
@@ -43,13 +42,12 @@
                                         {{ friendCardSpacingPercent }}%
                                     </span>
                                 </div>
-                                <el-slider
+                                <Slider
-                                    v-model="friendCardSpacing"
+                                    v-model="friendCardSpacingValue"
                                     class="favorites-dropdown__slider"
                                     :min="friendCardSpacingSlider.min"
                                     :max="friendCardSpacingSlider.max"
-                                    :step="friendCardSpacingSlider.step"
+                                    :step="friendCardSpacingSlider.step" />
-                                    :show-tooltip="false" />
                             </li>
                             <el-dropdown-item @click="handleFriendImportClick">
                                 {{ t('view.favorite.import') }}
@@ -108,7 +106,7 @@
                                                     circle
                                                     @click.stop></el-button>
                                             </PopoverTrigger>
-                                            <PopoverContent side="right" class="w-[220px] p-1 rounded-lg">
+                                            <PopoverContent side="right" class="w-55 p-1 rounded-lg">
                                                 <div class="favorites-group-menu">
                                                     <button
                                                         type="button"
@@ -284,6 +282,7 @@
     import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
     import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
     import { Badge } from '../../components/ui/badge';
+    import { Slider } from '../../components/ui/slider';
     import { Switch } from '../../components/ui/switch';
     import { favoriteRequest } from '../../api';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
@@ -339,6 +338,24 @@
 
     const friendCardScalePercent = computed(() => Math.round(friendCardScale.value * 100));
     const friendCardSpacingPercent = computed(() => Math.round(friendCardSpacing.value * 100));
+    const friendCardScaleValue = computed({
+        get: () => [friendCardScale.value],
+        set: (value) => {
+            const next = value?.[0];
+            if (typeof next === 'number') {
+                friendCardScale.value = next;
+            }
+        }
+    });
+    const friendCardSpacingValue = computed({
+        get: () => [friendCardSpacing.value],
+        set: (value) => {
+            const next = value?.[0];
+            if (typeof next === 'number') {
+                friendCardSpacing.value = next;
+            }
+        }
+    });
 
     const friendExportDialogVisible = ref(false);
     const friendFavoriteSearch = ref('');

src/views/Favorites/FavoritesWorld.vue

@@ -28,13 +28,12 @@
                                         {{ worldCardScalePercent }}%
                                     </span>
                                 </div>
-                                <el-slider
+                                <Slider
-                                    v-model="worldCardScale"
+                                    v-model="worldCardScaleValue"
                                     class="favorites-dropdown__slider"
                                     :min="worldCardScaleSlider.min"
                                     :max="worldCardScaleSlider.max"
-                                    :step="worldCardScaleSlider.step"
+                                    :step="worldCardScaleSlider.step" />
-                                    :show-tooltip="false" />
                             </li>
                             <li class="favorites-dropdown__control" @click.stop>
                                 <div class="favorites-dropdown__control-header">
@@ -43,13 +42,12 @@
                                         {{ worldCardSpacingPercent }}%
                                     </span>
                                 </div>
-                                <el-slider
+                                <Slider
-                                    v-model="worldCardSpacing"
+                                    v-model="worldCardSpacingValue"
                                     class="favorites-dropdown__slider"
                                     :min="worldCardSpacingSlider.min"
                                     :max="worldCardSpacingSlider.max"
-                                    :step="worldCardSpacingSlider.step"
+                                    :step="worldCardSpacingSlider.step" />
-                                    :show-tooltip="false" />
                             </li>
                             <el-dropdown-item @click="handleWorldImportClick">
                                 {{ t('view.favorite.import') }}
@@ -108,7 +106,7 @@
                                                     circle
                                                     @click.stop></el-button>
                                             </PopoverTrigger>
-                                            <PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
+                                            <PopoverContent side="right" class="w-50 p-1 rounded-lg">
                                                 <div class="favorites-group-menu">
                                                     <button
                                                         type="button"
@@ -222,7 +220,7 @@
                                                             circle
                                                             @click.stop></el-button>
                                                     </PopoverTrigger>
-                                                    <PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
+                                                    <PopoverContent side="right" class="w-50 p-1 rounded-lg">
                                                         <div class="favorites-group-menu">
                                                             <button
                                                                 type="button"
@@ -412,6 +410,7 @@
     import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
     import { favoriteRequest, worldRequest } from '../../api';
     import { Badge } from '../../components/ui/badge';
+    import { Slider } from '../../components/ui/slider';
     import { Switch } from '../../components/ui/switch';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
 
@@ -485,6 +484,24 @@
 
     const worldCardScalePercent = computed(() => Math.round(worldCardScale.value * 100));
     const worldCardSpacingPercent = computed(() => Math.round(worldCardSpacing.value * 100));
+    const worldCardScaleValue = computed({
+        get: () => [worldCardScale.value],
+        set: (value) => {
+            const next = value?.[0];
+            if (typeof next === 'number') {
+                worldCardScale.value = next;
+            }
+        }
+    });
+    const worldCardSpacingValue = computed({
+        get: () => [worldCardSpacing.value],
+        set: (value) => {
+            const next = value?.[0];
+            if (typeof next === 'number') {
+                worldCardSpacing.value = next;
+            }
+        }
+    });
 
     const worldGroupVisibilityOptions = ref(['public', 'friends', 'private']);
     const worldSplitterSize = ref(260);

src/views/FriendsLocations/FriendsLocations.vue

@@ -19,7 +19,7 @@
                             </TooltipWrapper>
                         </div>
                     </PopoverTrigger>
-                    <PopoverContent side="bottom" class="w-[350px]">
+                    <PopoverContent side="bottom" class="w-87.5">
                         <div style="display: flex; justify-content: space-between; align-items: center">
                             <span class="friend-view__settings-label">{{
                                 t('view.friends_locations.separate_same_instance_friends')
@@ -30,26 +30,24 @@
                             <span class="friend-view__settings-label">{{ t('view.friends_locations.scale') }}</span>
                             <div class="friend-view__scale-control">
                                 <span class="friend-view__scale-value">{{ cardScalePercentLabel }}&nbsp;</span>
-                                <el-slider
+                                <Slider
-                                    v-model="cardScale"
+                                    v-model="cardScaleValue"
                                     class="friend-view__slider"
                                     :min="0.5"
                                     :max="1.0"
-                                    :step="0.01"
+                                    :step="0.01" />
-                                    :show-tooltip="false" />
                             </div>
                         </div>
                         <div class="friend-view__settings-row">
                             <span class="friend-view__settings-label">{{ t('view.friends_locations.spacing') }}</span>
                             <div class="friend-view__scale-control">
                                 <span class="friend-view__scale-value">{{ cardSpacingPercentLabel }}&nbsp;</span>
-                                <el-slider
+                                <Slider
-                                    v-model="cardSpacing"
+                                    v-model="cardSpacingValue"
                                     class="friend-view__slider"
                                     :min="0.25"
                                     :max="1.0"
-                                    :step="0.05"
+                                    :step="0.05" />
-                                    :show-tooltip="false" />
                             </div>
                         </div>
                     </PopoverContent>
@@ -170,6 +168,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
+    import { Slider } from '../../components/ui/slider';
     import { Switch } from '../../components/ui/switch';
     import { getFriendsLocations } from '../../shared/utils/location.js';
     import { useFriendStore } from '../../stores';
@@ -218,6 +217,24 @@
 
     const cardScalePercentLabel = computed(() => `${Math.round(cardScale.value * 100)}%`);
     const cardSpacingPercentLabel = computed(() => `${Math.round(cardSpacing.value * 100)}%`);
+    const cardScaleValue = computed({
+        get: () => [cardScale.value],
+        set: (value) => {
+            const next = value?.[0];
+            if (typeof next === 'number') {
+                cardScale.value = next;
+            }
+        }
+    });
+    const cardSpacingValue = computed({
+        get: () => [cardSpacing.value],
+        set: (value) => {
+            const next = value?.[0];
+            if (typeof next === 'number') {
+                cardSpacing.value = next;
+            }
+        }
+    });
 
     const showSameInstanceBase = ref(false);
 

src/views/Settings/components/Tabs/NotificationsTab.vue

@@ -77,12 +77,9 @@
                 <span class="name" style="vertical-align: top; padding-top: 10px">{{
                     t('view.settings.notifications.notifications.steamvr_notifications.notification_opacity')
                 }}</span>
-                <el-slider
+                <div style="flex: 0 0 300px; width: 300px; max-width: 100%; padding-top: 16px">
-                    :model-value="notificationOpacity"
+                    <Slider v-model="notificationOpacityValue" :min="0" :max="100" />
-                    @input="setNotificationOpacity"
+                </div>
-                    :min="0"
-                    :max="100"
-                    style="display: inline-block; width: 300px; padding-top: 16px" />
             </div>
             <div class="options-container-item">
                 <el-button
@@ -162,7 +159,7 @@
                     :model-value="desktopToast"
                     size="small"
                     style="margin-top: 5px"
-                    @change="setDesktopToast($event)">
+                    @change="setDesktopToast(String($event))">
                     <el-radio-button value="Never">{{
                         t('view.settings.notifications.notifications.conditions.never')
                     }}</el-radio-button>
@@ -274,6 +271,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { useAdvancedSettingsStore, useNotificationsSettingsStore, useVrStore } from '../../../../stores';
+    import { Slider } from '../../../../components/ui/slider';
 
     import FeedFiltersDialog from '../../dialogs/FeedFiltersDialog.vue';
     import NotificationPositionDialog from '../../dialogs/NotificationPositionDialog.vue';
@@ -327,6 +325,15 @@
     const feedFiltersDialogMode = ref('');
     const isNotificationPositionDialogVisible = ref(false);
     const isLinux = computed(() => LINUX);
+    const notificationOpacityValue = computed({
+        get: () => [notificationOpacity.value],
+        set: (value) => {
+            const next = value?.[0];
+            if (typeof next === 'number') {
+                setNotificationOpacity(next);
+            }
+        }
+    });
 
     function showNotyFeedFiltersDialog() {
         feedFiltersDialogMode.value = 'noty';