diff --git a/src/charts/chart.js b/src/charts/chart.js
index 3553752..01f2ed6 100644
--- a/src/charts/chart.js
+++ b/src/charts/chart.js
@@ -5,6 +5,23 @@ export let widget = null
 export let chart = null
 export let crosshairPoint = null
 
+const subscribeEvents = [
+    'activeChartChanged', 'add_compare', 'chart_load_requested', 'chart_loaded', 'compare_add', 'drawing',
+    'drawing_event', 'edit_object_dialog', 'indicators_dialog', 'layout_about_to_be_changed', 'layout_changed',
+    'load_study_template', 'mouse_down', 'mouse_up', 'onAutoSaveNeeded', 'onMarkClick', 'onPlusClick',
+    'onScreenshotReady', 'onSelectedLineToolChanged', 'onTick', 'onTimescaleMarkClick', 'panes_height_changed',
+    'panes_order_changed', 'redo', 'reset_scales', 'series_event', 'series_properties_changed', 'study', 'study_event',
+    'study_properties_changed', 'toggle_header', 'toggle_sidebar', 'undo', 'undo_redo_state_changed',
+]
+
+function mouseDown() {
+    // console.log('mouseDown')
+    // console.log('selection', chart.selection().allSources())
+}
+
+function crosshairMoved({time,price}) {
+    console.log('crosshair', time, price)
+}
 
 export function initWidget(el) {
     widget = window.tvWidget = new TradingView.widget({
@@ -23,6 +40,12 @@ export function initWidget(el) {
     widget.subscribe('drawing_event', handleDrawingEvent)
     widget.subscribe('onSelectedLineToolChanged', onSelectedLineToolChanged)
     widget.onChartReady(initChart)
+
+    widget.subscribe('mouse_down', mouseDown)
+
+    // for( const event of subscribeEvents )
+    //     widget.subscribe(event, ()=>console.log(event, arguments))
+
 }
 
 
@@ -182,7 +205,7 @@ function onSelectedLineToolChanged() {
 }
 
 function handleDrawingEvent(id, event) {
-    console.log('drawing event', id, event)
+    // console.log('drawing event', id, event)
     const shape = event === 'remove' ? null : chart.getShapeById(id);
     if (event === 'create') {
         const co = useChartOrderStore();
diff --git a/src/charts/shape.js b/src/charts/shape.js
index 4ef4c7d..d076cb9 100644
--- a/src/charts/shape.js
+++ b/src/charts/shape.js
@@ -34,28 +34,6 @@ export const ShapeType = {
 }
 
 
-function updatePoints(shape, points) {
-    shape.lock++
-    try {
-        chart.getShapeById(shape.id).setPoints(points)
-    }
-    finally {
-        shape.lock--
-    }
-}
-
-
-function updateProps(shape, props) {
-    shape.lock++
-    try {
-        chart.getShapeById(shape.id).setProperties(props)
-    }
-    finally {
-        shape.lock--
-    }
-}
-
-
 class Shape {
     constructor(type, model={}, onModel=null, onDelete=null) {
         // the Shape object manages synchronizing internal data with a corresponding TradingView shape
@@ -69,6 +47,7 @@ class Shape {
         if (onDelete !== null )
             this.onDelete = onDelete
         this.lock = 0  // used to prevent callbacks when we are the ones forcing the chart change
+        this.propsLock = 0
         this.create()
     }
 
@@ -142,7 +121,7 @@ class Shape {
 
 
     delete() {
-        console.log('shape.delete', this.id)
+        // console.log('shape.delete', this.id)
         if (this.id === null) return
         this.lock++
         try {
@@ -188,6 +167,23 @@ class Shape {
 }
 
 
+function updatePoints(shape, points) {
+    shape.lock++
+    try {
+        chart.getShapeById(shape.id).setPoints(points)
+    }
+    finally {
+        shape.lock--
+    }
+}
+
+
+function updateProps(shape, props) {
+    chart.getShapeById(shape.id).setProperties(props)
+    shape.propsLock++
+}
+
+
 // B is modifying A
 function dirtyProps(propsA, propsB) {
     if (propsB===null)
@@ -209,9 +205,8 @@ class ShapeTVCallbacks {
 
     onCreate(shapeId, points, props) {
         if( this.shape.id )
-            throw Error(`Created a shape ${shapeId}where one already existed ${this.shape.id}`)
+            throw Error(`Created a shape ${shapeId} where one already existed ${this.shape.id}`)
         this.shape.id = shapeId
-        console.log('set shape id', this.shape)
         if( this.shape.lock ) return
         invokeCallback(this.shape, 'onCreate', points, props)
     }
@@ -226,7 +221,10 @@ class ShapeTVCallbacks {
 
     onProps(shapeId, props) {
         this.shape.props = props
-        if( this.shape.lock ) return
+        if( this.shape.propsLock ) {
+            this.shape.propsLock--
+            return
+        }
         this.shape.onProps(props)
         this.shape.propsToModel()
         this.shape.onModel(this.shape.model)
diff --git a/src/components/chart/LimitBuilder.vue b/src/components/chart/LimitBuilder.vue
index 4d040e5..4f4ef0d 100644
--- a/src/components/chart/LimitBuilder.vue
+++ b/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>
+