How to make symbol of mark clickable once the mouse pointer hover it in vega

Question

I have a vega horizontal bar chart with slider changing dynamically the value on xaxis .

The code

When the mouse pointer hover the slider (the triangle symbol) nothing happens initially and it is not possible to move the slider . In order to slide it left or right , first I need to click on it and only after that it is possible to do the sliding .

The expected behavior is to covert the mouse pointer to hand and make the slider move directly once hover is happening .

Answer 1

Give the mark a fill on enter.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 700,
  "height": 50,
  "padding": 5,
  "signals": [
    {
      "name": "currentYear0",
      "value": 350,
      "on": [
        {
          "events": "[@handle0:mousedown, window:mouseup] > window:mousemove!",
          "update": "clamp(invert('x', clamp(x(), 0, width)),0, currentYear1-5)"
        }
      ]
    },
    {
      "name": "currentYear1",
      "value": 700,
      "on": [
        {
          "events": "[@handle1:mousedown, window:mouseup] > window:mousemove!",
          "update": "clamp(invert('x', clamp(x(), currentYear0-5, width)),currentYear0-5, 700)"
        }
      ]
    }
  ],
  "scales": [
    {"name": "y", "type": "band", "range": "height", "domain": [1]},
    {"name": "x", "type": "linear", "range": "width", "domain": [0, 700]}
  ],
  "marks": [
    {
      "name": "rect0",
      "type": "rect",
      "encode": {
        "update": {
          "y": {"scale": "y", "value": "0"},
          "height": {"scale": "y", "band": 1, "offset": -1},
          "x": {"scale": "x", "signal": "0"},
          "x2": {"scale": "x", "signal": "currentYear0"},
          "fill": {"value": "#084d95"},
          "fillOpacity": {"value": 1}
        },
        "hover": {"fillOpacity": {"value": 0.5}}
      }
    },
    {
      "name": "rect1",
      "type": "rect",
      "encode": {
        "update": {
          "y": {"scale": "y", "value": "0"},
          "height": {"scale": "y", "band": 1, "offset": -1},
          "x": {"scale": "x", "signal": "currentYear0"},
          "x2": {"scale": "x", "signal": "700"},
          "fill": {"value": "#0ceebb"},
          "fillOpacity": {"value": 1}
        },
        "hover": {"fillOpacity": {"value": 0.5}}
      }
    },
    {
      "name": "handle0",
      "type": "symbol",
      "encode": {
        "enter": {
          "y": {"scale": "x", "value": 0, "offset": -7},
          "shape": {"value": "triangle-down"},
          "size": {"value": 400},
          "stroke": {"value": "#000"},
          "x": {"scale": "x", "field": "y0"},
          "x2": {"scale": "x", "field": "y1"},
          "strokeWidth": {"value": 0.5},
           "fill": {"value": "red"}
        },
        "update": {"x": {"scale": "x", "signal": "currentYear0"}},
        "hover": {
          "fill": {"value": "lemonchiffon"},
          "cursor": {"value": "pointer"}
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "y": {"value": -20},
          "fontSize": {"value": 16},
          "fontWeight": {"value": "bold"},
          "fill": {"value": "steelblue"},
          "align": {"value": "left"},
          "baseline": {"value": "middle"},
          "angle": {"value": -90},
          "format": ",.2s"
        },
        "update": {
          "text": {"signal": "format(currentYear0,'.1f')"},
          "x": {"scale": "x", "signal": "currentYear0"}
        }
      }
    }
  ],
  "config": {}
}