Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 1x 7x 1x 7x 7x 7x 8x 4x 4x 4x 4x 7x | <template>
<div class="single-slider-selector">
<v-row
no-gutters
align="center"
justify="space-between"
>
<v-col>
<span class="text-caption">{{ label }}</span>
</v-col>
<v-col cols="4">
<v-text-field
v-model="sliderValue"
class="mt-0 pt-0"
hide-details
variant="outlined"
density="compact"
type="number"
:append-inner-icon="prepend"
/>
</v-col>
</v-row>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { clamp } from '@/functions/clamp';
export interface Props {
value: number;
loading?: boolean;
label?: string;
min?: number;
max?: number;
step?: number;
prepend?: string;
}
const props = withDefaults(defineProps<Props>(), {
value: 0,
loading: false,
label: 'Test',
min: -99999,
max: 99999,
step: 1,
prepend: '',
});
const emit = defineEmits<{
'update:value': [number];
}>();
const sliderValue = computed({
get(): number {
return Math.floor(props.value);
},
set(value: string | number) {
Eif (value) {
const coerced = typeof value === 'number' ? value : parseInt(value);
const val = clamp(coerced, props.min, props.max);
emit('update:value', val);
}
},
});
defineExpose({ sliderValue });
</script>
<style>
.single-slider-selector
.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
> .v-input__control
> .v-input__slot,
.single-slider-selector
.v-text-field.v-text-field--enclosed
.v-text-field__details {
padding: 0px 8px !important;
}
.single-slider-selector
.v-text-field--outlined.v-input--dense.v-text-field--outlined
> .v-input__control
> .v-input__slot {
min-height: 32px !important;
}
.single-slider-selector .v-slider__thumb-label {
color: black;
}
.single-slider-selector {
margin-top: 4px;
margin-bottom: 4px;
}
</style>
|