---

title: BaseSlider

---

# BaseSlider

This component implements a range slider and prints the selected values. It receives a threshold
prop to set the limits and uses v-model to get and set the selected values.

It makes use of the nouslider library @see https://refreshless.com/nouislider/ for the slider
implementation.

## Props

| Name                      | Description                                                 | Type                                      | Default                                                       |
| ------------------------- | ----------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------- |
| <code>threshold</code>    | The threshold prop sets the limits for the slider.          | <code>{ min: number; max: number }</code> | <code>() => ({ min: 0, max: Number.MAX_SAFE_INTEGER })</code> |
| <code>modelValue</code>   | The modelValue prop sets the initial values for the slider. | <code>{ min: number; max: number }</code> | <code></code>                                                 |
| <code>contentClass</code> | Class to be able to customize slider styles.                | <code>string</code>                       | <code>''</code>                                               |

## Events

| Event name        | Properties | Description |
| ----------------- | ---------- | ----------- |
| update:modelValue |            |

## Slots

| Name                 | Description                                                                       | Bindings<br />(name - type - description)                                                            |
| -------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| <code>default</code> | Default selected range rendering. This slot will be used by default for rendering | **rangeSelected** <code>number[]</code> - The selected range values. Min position 0, Max position 1. |

## Examples

This component renders a slider and the selected values. The component needs the threshold for the
slider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),
which are passed using the `threshold` prop and the selected range, which is passed in using the
v-model.

### Default usage

It is required to send the value prop which holds the selected values.

```vue live
<template>
  <BaseSlider v-model="selectedRange" />
</template>

<script>
  import { BaseSlider } from '@empathyco/x-components';

  export default {
    name: 'BaseSliderDemo',
    components: {
      BaseSlider
    },
    setup() {
      const selectedRange = ref({ min: 0, max: 1000 });

      return {
        selectedRange
      };
    }
  };
</script>
```

#### With threshold

```vue live
<template>
  <BaseSlider v-model="selectedRange" :threshold="threshold" />
</template>

<script>
  import { BaseSlider } from '@empathyco/x-components';

  export default {
    name: 'BaseSliderDemo',
    components: {
      BaseSliderDemo
    },
    setup() {
      const threshold = ref({ min: 0, max: 1000 });
      const selectedRange = ref(threshold.value);

      return {
        selectedRange,
        threshold
      };
    }
  };
</script>
```

### Customized usage

#### Overriding the slots

It is possible to override the default slot to customize the layout for the selected values.

```vue live
<template>
  <BaseSlider v-model="selectedRange" :threshold="threshold" v-slot="{ rangeSelected }">
    <p class="x-base-slider__selected-min">
      <span>min value</span>
      <span>
        {{ rangeSelected[0] }}
      </span>
    </p>
    <p class="x-base-slider__selected-max">
      <span>max value</span>
      <span>
        {{ rangeSelected[1] }}
      </span>
    </p>
  </BaseSlider>
</template>

<script>
  import { BaseSlider } from '@empathyco/x-components';

  export default {
    name: 'BaseSliderDemo',
    components: {
      BaseSliderDemo
    },
    setup() {
      const threshold = ref({ min: 0, max: 1000 });
      const selectedRange = ref(threshold.value);

      return {
        selectedRange,
        threshold
      };
    }
  };
</script>
```

It is also possible to add inputs to complement the slider and allow to change the selected values
manually.

```vue live
<template>
  <BaseSlider v-model="selectedRange" :threshold="threshold">
    <input
      @change="selectedRange.min = $event.target?.valueAsNumber || 0"
      class="x-input"
      name="min"
      type="number"
      :value="selectedRange.min"
      :aria-label="'min'"
    />

    <input
      @change="selectedRange.max = $event.target?.valueAsNumber || 1000000"
      style="display: block"
      class="x-input"
      name="max"
      type="number"
      :value="selectedRange.max"
      :aria-label="'max'"
    />
  </BaseSlider>
</template>

<script>
  import { BaseSlider } from '@empathyco/x-components';

  export default {
    name: 'BaseSliderDemo',
    components: {
      BaseSliderDemo
    },
    setup() {
      const threshold = ref({ min: 0, max: 1000 });
      const selectedRange = ref(threshold.value);

      return {
        selectedRange,
        threshold
      };
    }
  };
</script>
```