Pan Slider

[JulesV]

How to turn a normal slider into a Pan slider as the picture below?
I just couldn't figure out how to do it.

HiseSnippet 1124.3ocsV0sSiaDEdLfq1j1spH0G.KtxglFbBAXQnpFfjzMs.aDltpqVgVMwdr8zXOSz3I.YqVo97zmBde5M8Mn8LdbRbJYgpnt9ln47yb9ly7MemzWv8HoobAxn7USFQPFego6DlL5zHLkg50FY7byKndDK2XpOQfNYxHbZJwGYXr9OnBwnzFnru+56OAGiYdj4lPnWygbOilPkys1u0OQii6h8IWQSJDcyV873rS4w7w.bV2zAMB6MDGRt.qBaMSzKwoQHisMabvg02ePCmFGN3.RSRif5jcGDbfecmccZha7hc2O.uec7gHiOqiOUxEtRrjjhL13Dt+D2H9sLcAdMMkNHlnVTG4BUVatKO1WcDUVQmFQi86OsOkhfco+7t155t1WadN0mNy97t2Wk4vZdFEafFqsH7VeA3UuH7bJ.uk.IiBPZCMj1zz0SPGIm6QgmO2rGSRDAX3dpHTzwhV6OV27TNDASVKAOjzU.Klkgcy8bpZU2woxQkKC2UoRqavBK2y50tykVem0zLCIxS4Ii3LXg8VZ2aMOmgrAw3fBw6IHPC3LtGN9LNe3wL+tDRrMjgNzZBRHME.Q2wLOIkyr2xWfu8LJifEZh4VUsBl5LrpEevuVo7uUtjBdXnRv5ZXnJGoMEgY9wDvN9sMtdm8ysx.C1JKVeadDUr1IKj7.tIemtAGOlbAWjfioum3assEChnboc1ozfvxkBqkpZ.Jdrs9mzZvwvaHbf.mA.6+R9XFPwtj3IwrvXhMtJTncudamZ6UY5ds7cJlFFICEjIOxt8V3ZxoZFz29FquI+znKw0KoRZ+Kud2FQAxYBeH4wJntTYU8oJljbmh2.svmrUotkOFNvLh+UPV1cXgvcdMe9X3YwUbWofxBsmckT0pQkpVOBV1xCnaBhuhL9AEgTyMUf3ArOM0qxQSoUVb1EbI4UL6LlU4OT15e6JHXo9TzbAONlHVpakJn3wRzlMNY.QTU2zlEH7ReQ4CyOt7QQ0MO8qtBAxY8XT4qFQXeLMOT9SUkTSNpfPkYBMeYtPS9DBJnm7LSciEkg3bI9e+O27GuG8y8Zik3o6CrkPYFQDRp5DXzlbCLvPKfUxrMIcnjOJK1b4DX.0SW06lMTokaqIymvzt0sTeYzLC2KZEQTOmJNDJAOOczaZkP8AFTedJUcoTb1VJz.UrxS32oTPSJNL7M2mv8ATZZ1GyPoxIwYiVeIWPeObrwwvXvGnXCyJ39iiwxEGfnFyl6Pgfhp1JkYFfrIEGC++1Tk+qPbSy9ToWzxw3ZKAivs+mBLlOK94lcBB.ko4.bCyt+xmlAuHPITBZPmiAoHfFXdw3DWPEyi.UmwHwpmkFqod.oW6nVq5.tDle1h+F9xcVWs1H2Y8oNQIXOA+cd5mcpo8OKyBfIV1+Lpj44p0V0W34V1Gvdouyyaws5AI1XUSb2UMwlqZh6spIt+pl3AqZhu3oST8eCOdrjmne1fPm2uSl7ngQGFFXfYrUz+.jLiF0F

[HISEnberg]

@JulesV You mostly just need to define a center point and draw from there. Here is a hasty implementation:

Content.makeFrontInterface(450, 100);

const var SLIDER = Content.getComponent("SLIDER");

// Create a LookAndFeel instance
const knblaf = Content.createLocalLookAndFeel();
knblaf.registerFunction("drawLinearSlider", function(g, obj)
{
    var a = obj.area;
    var handle = a[2] / 6; // Size of the handle
    var mid = a[2] / 2; // Middle point of the slider
    var n = (a[2] - handle) / a[2]; // Normalization factor

    // Normalized range
    var bipolarValue = obj.valueNormalized * 2 - 1; 
    var v = mid + (bipolarValue * mid * n);

    // Draw background
    g.setColour(Colours.black);
    g.fillRoundedRectangle(a, a[3] * 0.5);

    // Draw slider fill
    if (bipolarValue >= 0)
    {
        g.setColour(Colours.lightgrey);
        g.fillRoundedRectangle([mid, 0, v - mid, a[3]], a[3] * 0.5);
    }
    else
    {
        g.setColour(Colours.lightgrey);
        g.fillRoundedRectangle([v, 0, mid - v, a[3]], a[3] * 0.5);
    }

    // Draw handle
    g.setColour(Colours.whitesmoke);
    g.fillRoundedRectangle([v - handle / 2, 0, handle, a[3]], a[3] * 0.5);

    // Draw text value
    g.setColour(Colours.black);
    var displayValue = Math.round(bipolarValue * 100); // Scale to -100 to 100
    g.drawAlignedText(Engine.doubleToString(displayValue, 0), [v - handle / 2, 0, handle, a[3]], "centred");
});

// Set LookAndFeel for the slider
SLIDER.setLocalLookAndFeel(knblaf);

// Set slider properties for bipolar behavior
SLIDER.set("min", -100);
SLIDER.set("max", 100);
SLIDER.set("mode", "Pan");
SLIDER.set("text", "");

[JulesV]

@HISEnberg That's exactly what I meant. Thank you very much!