<template>
  <label class="field">
    <span v-if="label" class="field-label">{{ label }}</span>
    <span v-if="description" class="field-description" v-html="description"></span>

    <div class="flex nowrap-xs middle-xs">
      <input
        v-bind="$attrs"
        class="range-slider"
        type="range"
        :value="value"
        v-on="inputListeners"
      />
      <span class="text-dark text-medium left-padding-small vertical-padding-small">{{ value }}</span>
    </div>
  </label>
</template>

<script src="./scripts.js"></script>
