Buefy — Numeric Slider

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Numeric Slider

We can add a slider to set a numeric value with the b-slider component.

For example, we can write:

<template>
  <section>
    <b-field label="number">
      <b-slider v-model="value"></b-slider>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {
      value: 5
    };
  }
};
</script>

We add v-model to bind the value to a state.

We can disable it with the disabled prop.

The size can be changed with the size prop:

<template>
  <section>
    <b-field label="number">
      <b-slider size="is-large" :value="20"></b-slider>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

The style can be changed with the type prop:

<template>
  <section>
    <b-field label="number">
      <b-slider type="is-success" :value="20"></b-slider>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

We can customize the label with the custom-formatter prop:

<template>
  <section>
    <b-field label="number">
      <b-slider type="is-success" :custom-formatter="val => `${val}%`"></b-slider>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

now the tooltip shows the % symbol after the number since we set the custom-formatter prop to our own function.

Tick and Label

We can add ticks by populating the default slot with the b-slider-tick component:

<template>
  <section>
    <b-field label="Custom tick and label">
      <b-slider size="is-medium" :min="0" :max="10">
        <template v-for="val in [2,4,6,8]">
          <b-slider-tick :value="val" :key="val">{{ val }}</b-slider-tick>
        </template>
      </b-slider>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

Range Slider

We can add a range slider with the min and max props to restrict the range that we can select.

Then the value we bound to v-model would be an array with the min and max values:

<template>
  <section>
    <b-field>
      <b-slider v-model="numbers" :min="0" :max="15" :step="0.5"></b-slider>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {
      numbers: [1, 5]
    };
  }
};
</script>

Lazy Update

We can add the lazy prop to update the v-model value only when dragging is done:

<template>
  <section>
    <b-field>
      <b-slider v-model="value" lazy></b-slider>
    </b-field>
    {{value}}
  </section>
</template>

<script>
export default {
  data() {
    return {
      value: 20
    };
  }
};
</script>

Conclusion

Buefy’s b-slider component is a useful slider component for Vue.