RangeSlider able to be disabled

This commit is contained in:
Omer
2019-11-25 01:31:29 +02:00
parent f5915ae783
commit b0135d12e8
2 changed files with 8 additions and 9 deletions

View File

@@ -6,7 +6,7 @@
</v-col>
<v-col :cols="10">
<v-range-slider :value="localValue" @input="handleInput" :max="max" :min="min" hide-details
class="align-center" dark color="#4baf62" :step="step">
class="align-center" dark color="#4baf62" :step="step" :disabled="disabled">
<template v-slot:prepend>
<v-text-field :value="localValue[0]" :max="max" :min="min" @input="handleChange"
@focus="prependFocused = true" @blur="prependFocused = false" class="mt-0 pt-0"
@@ -27,7 +27,7 @@
<script>
export default {
name: 'RangeSlider',
props: ['name', 'min', 'max', 'value', 'step'],
props: ['name', 'min', 'max', 'value', 'step','disabled'],
data() {
return {
prependFocused: false,

View File

@@ -1,17 +1,16 @@
<template>
<div>
<CVswitch v-model="value.isColorPick" name="Colorpick Calibration"/>
<v-divider color="white"/>
<v-divider color="darkgray "/>
<CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')" :disabled="isAutomaticHSV"/>
<CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255"
@input="handleData('saturation')"/>
<CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')"/>
<v-divider color="white"/>
<CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255" @input="handleData('saturation')" :disabled="isAutomaticHSV"/>
<CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')" :disabled="isAutomaticHSV"/>
<v-divider color="darkgray "/>
<v-btn style="margin: 20px;" tile color="#4baf62" :disabled="isManualHSV">
<v-icon>C</v-icon>
<v-icon>colorize</v-icon>
Colorpick Calibration
</v-btn>
<v-divider color="white"/>
<v-divider color="darkgray "/>
<CVswitch v-model="value.erode" name="Erode" @input="handleData('erode')"/>
<CVswitch v-model="value.dilate" name="Dilate" @input="handleData('dilate')"/>
</div>