Degree-picker NPM

🚀 Installation

Install using your package manager of choice:

yarn add degree-picker

📺 Demo

https://matija-components.vercel.app/degree-picker

⚙️ Usage

Import the component locally or define it globally and include the css file:

<template>
  <degree-picker active-color="green" v-model="degrees" />
</template>

<script lang="ts" setup>
import { DegreePicker } from "degree-picker";
import { ref } from "vue";
import "degree-picker/dist/style.css";

const degrees = ref(0);
</script>

📃 Props

Name	Type	Default	Description
`active-color`	`string`	#567a0d	Background color of the active value and clock hand
`body-color`	`string`	#eee	Background color of the picker body
`v-model`	`number`		Standard two way input
`step`	`number`	30	The step used for displaying the degrees
`min`	`number/string`	0	Minimum allowed value of the picker
`max`	`number/string`	359	Maximum allowed value of the picker
`width`	`number/string`	290px	Sets the width of the element - can be provided as a string like "290px" or "290" or a number, defaults to 290px
`full-width`	`boolean`	false	Ignores the previous `width` prop and sets the width to 100% of the parent container
`disabled`	`boolean`	false	Makes the component unclickable
`readonly`	`boolean`	false	Makes the component unclickable, but does not make it seem disabled