made-vue-range-selector

<img src="https://github.com/MADE-Apps/MADE-Vue/blob/main/assets/ProjectBanner.png" alt="MADE Vue project banner" />

Stats

StarsIssuesVersionUpdatedCreatedSize
made-vue-range-selector
210.1.0-alpha.421 days agoa month agoMinified + gzip package size for made-vue-range-selector in KB

Readme

MADE Vue project banner

MADE Vue - Range Selector

License - MIT Build - GitHub Actions Source - npmjs npm

A Vue 3 range selector component, a double slider that allows the user to select a value range between a minimum and maximum value.

Usage

To customise the range selector, you'll want to import the scss styling:

import "made-vue-range-selector/styles.scss";

In your main file, you can import the component:

import { createApp } from "vue";
import App from "./App.vue";

import RangeSelector from "made-vue-range-selector";

const app = createApp(App);
...
app.use(RangeSelector);
...
app.mount("#app");

You can then reference the range selector component in your app:

<template>
  <div>
    <m-range-selector
      v-model="rangeValue"
      :min="rangeMin"
      :max="rangeMax"
      :step="rangeStep"
      :showValues="rangeShowValues"
      :formatValue="formatRangeValue"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MyPage",
  data() {
    return {
      rangeValue: [0, 100],
      rangeMin: 0,
      rangeMax: 100,
      rangeStep: 1,
      rangeShowValues: true,
      formatRangeValue: (v: number) => {
        return `${v}%`;
      },
    };
  },
  watch: {
    rangeValue(value) {
      console.log(value);
    },
  },
});
</script>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.