Input Slider v1.0

<e-input-slider
  id="sliderInputWithOptions"
  :value="'50'"
/>

<div class="input-example-field">
  <e-input-label
    :id="'sliderInputWithLabel'"
    :value="'sliderInput with Label'"
  />
  <e-input-slider
    :id="'sliderInputWithLabel'"
    :label="'sliderInput with Label'"
    :value="'exampleSlider1'"
  />
</div>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';

import { EInput_Slider } from 'types/e-input/interfaces/EInput_Slider';

export type Props = EInput_Slider;
const props = withDefaults(defineProps<Props>(), {
  id: '',
  name: '',
  placeholder: '',
  required: false,
  disabled: false,
  meta: () => {
    return {
      disabled: false,
      max: 100,
      min: 0,
      steps: 1
    };
  }
});

const emit = defineEmits<{
  (e: 'blur', event: FocusEvent): void;
  (e: 'update:value', value: string): void;
}>();

const input = ref<HTMLInputElement>();

const localValue = ref(props.value || '0');

const isDisabled = computed(() => props.disabled ?? props.meta?.disabled);

const stateClasses = computed(() => {
  return {
    disabled: isDisabled.value
  };
});

const rangeMin = computed(() => {
  return props.meta.min || 0;
});

const rangeMax = computed(() => {
  return props.meta.max || 100;
});

const rangeSteps = computed(() => {
  return props.meta.steps || 1;
});

function setValue(targetValue: number) {
  localValue.value = targetValue.toString();

  emit('update:value', localValue.value);
}

const emitUpdate = (event: InputEvent) => {
  const target = event.target as HTMLInputElement;
  localValue.value = target.value;

  emit('update:value', localValue.value);
};

watch(
  () => props.value,
  (newValue, oldValue) => {
    if (localValue.value !== newValue && newValue !== oldValue) {
      localValue.value = newValue;
    }
  }
);
</script>

<template>
  <div
    class="e-input-slider"
    :class="stateClasses"
  >
    <span
      class="current-value-label"
      :title="localValue"
      v-text="localValue"
    />

    <div class="slider-container">
      <label
        :title="rangeMin.toString()"
        @click="setValue(rangeMin)"
        v-text="rangeMin"
      />
      <input
        :id="id"
        ref="input"
        class="slider"
        type="range"
        :name="id"
        :required="required"
        :disabled="isDisabled"
        :min="rangeMin"
        :value="localValue"
        :max="rangeMax"
        :step="rangeSteps"
        @input="emitUpdate"
      />
      <label
        :title="rangeMax.toString()"
        @click="setValue(rangeMax)"
        v-text="rangeMax"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
$option-height: 24px;

.e-input-slider {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: none;
  position: relative;
  margin: 10px 0;
  gap: 30px;
  padding-left: 10px;

  $thumb-size: 18px;
  $bar-height: 10px;

  .current-value-label {
    min-width: 40px;
  }

  .slider-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: none;
    flex: 1 1 auto;
    gap: 10px;
    align-content: center;

    label {
      min-width: 30px;
    }

    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: $bar-height;
      border-radius: 5px;
      background: var(--e-input-background);
      outline: none;

      &::-webkit-slider-thumb {
        appearance: none;
        border-radius: 50%;
        height: $thumb-size;
        width: $thumb-size;
        -webkit-appearance: none;
      }

      &::-moz-range-thumb {
        border-radius: 50%;
        height: $thumb-size;
        width: $thumb-size;
      }

      &:not(:disabled) {
        &::-moz-range-thumb {
          background: var(--e-accent);
          cursor: pointer;
        }
        &::-webkit-slider-thumb {
          background: var(--e-accent);
          cursor: pointer;
        }

        &:focus {
          background: var(--e-input-focus-background);

          &::-moz-range-thumb {
            background: var(--e-secondary);
            outline: 1px solid var(--e-foreground);
          }
          &::-webkit-slider-thumb {
            background: var(--e-secondary);
            outline: 2px solid var(--e-foreground);
          }
        }

        &:active {
          background: var(--e-input-focus-background);

          &::-moz-range-thumb {
            cursor: grabbing;
            background: var(--e-secondary);
          }
          &::-webkit-slider-thumb {
            cursor: grabbing;
            background: var(--e-secondary);
          }
        }
      }

      &:disabled {
        cursor: not-allowed;

        &::-moz-range-thumb {
          cursor: not-allowed;
          background: var(--e-disabled);
        }
        &::-webkit-slider-thumb {
          cursor: not-allowed;
          background: var(--e-disabled);
        }
      }
    }
  }

  &:not(.disabled) {
    .slider-container {
      label {
        cursor: pointer;

        &:hover {
          font-weight: bold;
        }
      }
    }
  }

  &.disabled {
    .slider-container {
      label {
        cursor: not-allowed;
        user-input: none;
      }
    }
  }
}
</style>