Add the range slider design to the NumberInput widget (#839)

* Add range slider to NumberInput

* Cleanup

* Fix event ordering causing bug in Firefox

* Polish the code

* Switch number input modes to range in relevant places
This commit is contained in:
Keavon Chambers
2022-11-05 22:57:19 -07:00
parent 18507b78ac
commit 782f528279
9 changed files with 435 additions and 120 deletions
@@ -23,7 +23,7 @@
}
&.centered {
input {
input:not(:focus) {
text-align: center;
}
}
@@ -38,12 +38,19 @@ import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
export default defineComponent({
emits: ["update:value", "commitText"],
props: {
value: { type: String as PropType<string>, required: true },
// Label
label: { type: String as PropType<string>, required: false },
tooltip: { type: String as PropType<string | undefined>, required: false },
// Disabled
disabled: { type: Boolean as PropType<boolean>, default: false },
// Value
value: { type: String as PropType<string>, required: true },
// Styling
centered: { type: Boolean as PropType<boolean>, default: false },
minWidth: { type: Number as PropType<number>, default: 0 },
tooltip: { type: String as PropType<string | undefined>, required: false },
sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
},
data() {