bugfixes

src/components/chart/LimitBuilder.vue

@@ -28,12 +28,12 @@
         />
       </div>
       <div v-if="rungs>1" class="mx-2 d-flex align-center">
-        <v-slider v-if="rungs>1" direction="vertical" min="-100" max="100" v-model="skew100" class="slider ml-2 mr-4" hide-details/>
+        <v-slider v-if="rungs>1" direction="vertical" min="-100" max="100" v-model="skew100" class="no-slider-bg ml-2 mr-4" hide-details/>
         <v-text-field type="number" v-model="skew100" min="-100" max="100"
                       density="compact" hide-details variant="outlined" label="Skew" step="10"
                       :color="color" :base-color="color">
           <template v-slot:prepend>
-            <v-btn icon="mdi-scale-balance" variant="text" @click="builder.skew=0"/>
+            <v-btn icon="mdi-scale-balance" variant="plain" @click="builder.skew=0"/>
           </template>
         </v-text-field>
       </div>
@@ -85,6 +85,7 @@ const skew100 = computed( {
   set(v) {props.builder.skew = v/100; adjustShapes()}
 } )
 
+
 // we keep two special control lines as the edge of the ranges and then deletable lines in-between
 
 const lineAPrice = computed({
@@ -125,7 +126,7 @@ function createInteriorLine(price) {
       deleteBuilder)
   line.onPoints = function (points) {
     const delta = points[0].price - this.model.price
-    console.log('moving delta', delta)
+    // console.log('moving delta', delta)
     if (delta != 0) {
       props.builder.priceA += delta
       props.builder.priceB += delta
@@ -215,11 +216,11 @@ const prices = computed(()=>{
   let a = props.builder.priceA
   let b = props.builder.priceB
   const r = props.builder.rungs
-  console.log('prices for', a, b, r)
+  // console.log('prices for', a, b, r)
   if ( a===null || !r ) return []  // no data
   if (r===1) return [a]  // single line
   const spacing = (b-a)/(r-1)
-  console.log('spacing', a, b)
+  // console.log('spacing', a, b)
   const result = []
   for( let i=0; i<r; i++ )
     result.push(a+i*spacing)
@@ -263,11 +264,10 @@ let priceRangeId = null
 
 
 function adjustShapes() {
-  console.log('limit adjust shapes')
+  // console.log('limit adjust shapes')
   const limits = prices.value
   console.log('limits', limits)
   if( limits.length === 0 ) {
-    console.log('no lines')
     lineA.delete()
     lineB.delete()
     for( const line of interiorLines )
@@ -278,7 +278,6 @@ function adjustShapes() {
     //
     // SINGLE LINE
     //
-    console.log('single line')
     lineA.setModel({price:limits[0], color: colors.value[0]})
     lineB.delete()
     for( const line of interiorLines )
@@ -286,7 +285,6 @@ function adjustShapes() {
     interiorLines = []
   }
   else {
-    console.log('price range')
     //
     // PRICE RANGE
     //
@@ -361,7 +359,8 @@ if (!props.builder.priceA)
 :deep(.v-slider.v-input--vertical > .v-input__control) {
   min-height: 5em !important;
 }
-.v-slider-track__fill {
+:deep(.v-slider.no-slider-bg .v-slider-track__fill) {
   background-color: inherit !important;
 }
 </style>
+