@energie360/ui-library 0.1.23 → 0.1.25

package/elements/range-slider/u-range-slider.vue

@@ -1,138 +0,0 @@
-<script setup lang="ts">
-// NOTE: URangeSlider as a base widget was a good idea.
-// But at the moment not really usable.
-// Maybe deprecate it.
-
-import { useTemplateRef, onMounted, useId, watch } from 'vue'
-import { scaleValue } from '../../utils/math/scale-value'
-
-export interface RangeSlider {
-  label: string
-  min?: number
-  max?: number
-}
-
-const { min = 0, max = 100 } = defineProps<RangeSlider>()
-
-const id = useId()
-const model = defineModel<number>()
-const thumbEl = useTemplateRef('thumb')
-const lowerFillEl = useTemplateRef('lower-fill')
-let thumbWidth
-
-const setThumbPosition = () => {
-  const position = scaleValue(Number(model.value), Number(min), Number(max), 0, 100, 2)
-  thumbEl.value.style.left = `${position}%`
-
-  lowerFillEl.value.style.width = `calc(${position}% + ${thumbWidth / 2}px)`
-}
-
-onMounted(() => {
-  // Store thumb width. We'll judt assume that this won't change during runtime.
-  thumbWidth = thumbEl.value.getBoundingClientRect().width
-
-  setThumbPosition()
-})
-
-watch(model, () => {
-  setThumbPosition()
-})
-</script>
-
-<template>
-  <div class="range-slider">
-    <label class="visually-hidden" :for="id">{{ label }}</label>
-    <div class="range-slider__input">
-      <input
-        :id
-        v-model="model"
-        type="range"
-        :min
-        :max
-        @input="setThumbPosition"
-        @change="setThumbPosition"
-      />
-    </div>
-    <div class="range-slider__slider">
-      <div class="range-slider__track">
-        <div ref="lower-fill" class="range-slider__lower-fill"></div>
-        <div ref="thumb" class="range-slider__thumb"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@use '../../base/abstracts' as a;
-
-.range-slider {
-  --range-height: 24px;
-  --range-width: 100%;
-  --range-border-radius: 0;
-  --range-upper-fill-color: rgba(150, 150, 150);
-  --range-lower-fill-color: rgb(0, 150, 0);
-  --range-thumb-height: 24px;
-  --range-thumb-width: 12px;
-  --range-thumb-border-radius: 0;
-  --range-thumb-background-color: rgb(0, 0, 0);
-  --range-thumb-transform: none;
-  --range-thumb-transition: none;
-
-  /* "display: contents" would be better, but it still has some accessiblity issues -> https://ericwbailey.website/published/display-contents-considered-harmful/ */
-  position: relative;
-  display: inline-flex;
-  width: var(--range-width);
-  height: var(--range-height);
-}
-
-.range-slider__input {
-  display: flex;
-  width: 100%;
-
-  input {
-    width: 100%;
-  }
-}
-
-.range-slider__slider {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  background-color: var(--range-upper-fill-color);
-  border-radius: var(--range-border-radius);
-}
-
-.range-slider__thumb {
-  position: relative;
-  height: var(--range-thumb-height);
-  width: var(--range-thumb-width);
-  background-color: var(--range-thumb-background-color);
-  border-radius: var(--range-thumb-border-radius);
-  transform: var(--range-thumb-transform);
-  transition: var(--range-thumb-transition);
-}
-
-.range-slider__track {
-  position: relative;
-  width: calc(100% - var(--range-thumb-width));
-  height: 100%;
-}
-
-.range-slider__lower-fill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  border-top-left-radius: var(--range-border-radius);
-  border-bottom-left-radius: var(--range-border-radius);
-  background-color: var(--range-lower-fill-color);
-  min-width: var(--range-thumb-width);
-}
-
-.visually-hidden {
-  @include a.visually-hidden;
-}
-</style>