Weird LAF behavior on vertical Sliders

[Morphoice]

When I create a Slider with text and the actual slider doesn't fill 100% of the elements hight, the mouse click behaves weird, the handle jumps and itself is not precicely moveable with the mouse, as the value is calculated relatively to the actual mouse position in the element...
Is there a way to prevent this?

This is my slider code

const laf_Slider = Content.createLocalLookAndFeel();
laf_Slider.registerFunction("drawLinearSlider", function(g, obj)
{
	var a = obj.area;
	g.setColour(Colours.withAlpha(obj.bgColour, 0.3));
	g.fillRoundedRectangle([16,0,16,a[3]-20],10);
	g.setColour(obj.itemColour1);
	var h = 24;
	var y = a[3] - (a[3]-30) * obj.valueNormalized - h - 30 + h * obj.valueNormalized;
	g.fillRoundedRectangle([5, y, a[2]-10, h],10);
	g.setFont("Oxygen Bold", 16.0);
	g.setColour(Colours.white);
	if (obj.hover || obj.clicked)
		g.drawAlignedText(obj.valueAsText, [a[0], a[1], a[2], a[3]], "centredBottom");
		else
		g.drawAlignedText(obj.text, [a[0], a[1], a[2], a[3]], "centredBottom");
});

Here's a video
https://www.dropbox.com/scl/fi/52qzm8024wus19doznpbs/IMG_8735.MOV?rlkey=u8edku45d533ygdxa2017wvnv&dl=0

[d.healey]

@Morphoice The problem is that part of the slider is now occupied by the value display, but the slider doesn't know that, as far as it's concerned it's just a standard slider. So the click/drag area is still the full area of the slider.

I had a similar issue with a slider I'm working on. My solution was to use separate labels for the value display and update them via a broadcaster.

If this is suitable for you I can put a little example snippet together.

[Morphoice]

@d-healey I guess it will have to do, if that's the only workaround. I was hoping to avoid extra labels as there will be a whole lot and it was super convenient to have it within the slider and only switch from its name to its value during the dragging

[d.healey]

@Morphoice

Here's a factory function example, tweak it to suit your needs and apply laf, etc.

HiseSnippet 1469.3ocsW0kaabCDlqiWiH0lhjh7bAgdRtUPQRQw10AEww+kplXagJmzBDjFPQRIw3UjB6R4Hkf7VOE8PzqPOK8FzaP6Lj6Jsx14OATAaCQxY37My2vYF2N1vkIIlXRPwSmNRRB9xvNS01A6MfozjV6SB9lvykwVEmE0IRIjwGx3VS7zClvFNJRR1c5HVRhTPBBt1iPcBJrJw84edvtrHllKmuEg7LihKehZnxNe2167XUTzgLg7T0vbR2bmVbidOSjYLfuqEViLhwOi0WdLCEakPxOxRFPB91PQ8l06sEmswV0a1fyar0lM99M4RVudxMpeuMatUul8X7ZMHAqcfPAvuikYkIvktqQLsy.yq0dC7LUhpK3Uvh5jNfk8aS1afJRzNKXkPHAq1ddn6Z9P2sCORITy1edH7ltCny0HePKXkODjp+Y.ofbPZUOjtUXGdrZjc9IHd9hvVZqLFBIKxedYIqbdX3dFPBss5P1YxCigEyzn7F0pUgB+Y86WrnFXhDfUjzmsPRRw2VrfRGozRZuwZtUYzaS8W+Icekjao7XI3ukSbh2RrMMwFqz8qPGwhAC2lokQKpREJbBaa5CiiYSWuXAvDEhLfIo9Kg9CzLTyDhGqMcmc6Un.jQ.W.9.+IStDIFYFgPWl.t4vepyIGmSKzDEJMoz1NS+7ZunBszzrU0wUuVIrCx1oAty.op+.a1V28EUb2g2q1yLbjQCeANNmeVsuz1RTdcunI1oQRPfRYgzRo6C4DmJmX20f.pGKJQB6+NmW4+wGM5xgHwA59PvupOJuargI3rDfAK+VEFqS8P52AVgEMVVBCt8S1l97R7YXDblycG9BuQ5xqxrVFevolYNhS6bQrzqKCT24NzVzwIR5Y5tTVBkQGEK6olP6YhornHXeSWXasHESIUbKh5F4DIh0UFkTk9PwqFmXwaPKkBon5Lu0IwhT+SvslgopwxQQXdaI.CnOA2co0cYDozHDER4JLk9ikc3L3LFymhbA188SttzkKc7uf6lJgEXXf68btDpLvfG+WAcijgPLyjo.c5ST.KqAd1ASvaw6C8ZnZjtuLMbktY1SyxJsPNoBcF0Wg5Hd3Ql6UVgXocbrNKoRXFCX5TSG2K1xNQqPquNlMQE6V59o3r3LE8bw8Qf+thuqXQnrNvlN+udNtCBEybnxk7GioRdwA5Cav.xuXslzjbG+hB.NlW0Jzm2DX46A+1.98t0p4H3LulZzGarxSzkWGKWA3hdwi506JOCwarIJBByW0wXWr3Ojhk0iG1UFOKJmJHT0dwVAq8o0Jf6Ce4DznaoU1SFISWenIRfk3wue4FGjz3O1BIEgfnVWCjuJsAhOTSTvkTHLMPSbvOeCexSasOyxxtn44kJzcB1WdNz822YpP39xjyrlQNYSIcvk8l8FY8sPhzY0qG5IUxj4F73clNeQqcbOtHAgABXouLLt5OB.7rRNabyOAWCsxZkSGZAsxZMRW3JOCiKElkERFpDhHYaShBo4bwi+BdKNpi5MtXzau8e9n+9M+9CFleFIBYHaR9HXx3dP4Q2vM8TQCwlhiZMDl4gD70gOEJjJj8Xiirzjyf6AZvdlTbpwIep6WXsamd0YgfBqUIvuyEpSkKplq4BFybRmWtEoEWE1zHFTNMKh40aJ9keC9JVkAMQ8p0fxBjEnm2ORxp4MCFWdpFXdJiXbDyt3PVHLRO.4g7S1fSunA9YZ9X8mwjW09fSd8oBwaE1VY4CtZLtxUfQLw8+ALlNu5MBO.FPlamCvUCO7WW1gS+Hl+mMisP2hiXPFMlpb73gcf454RrwDP7IHeuBl04WWKi+6H0B2h+E9jdXcbcP5g0yNDdKwiMuj6KggSDec2N.lzt+igBgGgqo0uXkKB9FV8RNewq5RJ1XYU7tKqhMWVEu2xp3FKqhatrJt0GWQ7+e5gislg9mMDxQsOv0oIH3.MVsvksR9OfEwv3K

[Morphoice]

@d-healey brilliant. How would I style the slider with LAF though and set its colors? Is it possible to have the label display the slider's text instead of a value while it is not dragged?

[Morphoice]

@d-healey the problem is still the same btw, as the slider "handle" has a height and if you don't grab it at the absolute bottom it wont register as 0 value, so it's really just a few percent less (the hight of the former label) but not gone completely

[d.healey]

@Morphoice said in Weird LAF behavior on vertical Sliders:

How would I style the slider with LAF though and set its colors?

Just like any other slider. The function returns a reference to the knob - in this case I've put it in a variable called knbGain. So you would do knbGain.setLocalLookAndFeel(etc.).

Or if you want all of your sliders to have the same laf you could assign the laf within the factory function.

@Morphoice said in Weird LAF behavior on vertical Sliders:

Is it possible to have the label display the slider's text instead of a value while it is not dragged?

Yes this should be doable, do you want it to show the value only when dragging, or also on hover/mouse over?

[Morphoice]

@d-healey said in Weird LAF behavior on vertical Sliders:

Yes this should be doable, do you want it to show the value only when dragging, or also on hover/mouse over?

good question. I recon on hover has a nice touch to it, considering usability

[d.healey]

@Morphoice Ok so we do the same thing but use a mouse broadcaster instead of a value listener. The label will display the knob's text when the mouse is not over, and the knob's value when it is over.

HiseSnippet 1480.3ocsW0kaabCDlqsWiH0lhFf7bA69PgTqfhjhhsqCJhhskaTSrsPkiSJBRCnHorX7JRgcobrRfA5C8fzSPuN84dC5MncH4tq10w4GXzH.aHNb94ieyPNi5Gon73XUDxq7gymxQdet+f4R83sGSDRTucPdek+o7HsfRBGDJX7ncITsJZd2yHSlFxQaMeJINlyPddK+iFa7JsBx94et2VjPhjxWHBgNRIn7GIlHzKj1uyCEgg6RX7CESxoc6N8nJ41pP0L.eK62.MkPOgbLeehQsk7QOfDOF48s9rlsaNZCJYsMZ1tEk1Zi0a88qS4jQi3q07Nq2diQsGQnMZg7VsKS.vefln4wHuU1RwlOXr5URW.NRDKFBmJXQSz.HxNw6pBYlinQJZ6whPV+ThKFAdo+BZbYGMdS+8DLQl7Ez4WZ2.uvh7Dn2REg2xEfWy7vqQN3cIPxKGjVwAoa3OfFIlpWriAOeleOolGAzSwboSWzRe8p9aq.Mj55SHmv2MBVjYQk0ZznFF9W06VtrDxJwPFhiOpPAS42TtjPFJjb7nYRpVnjahct+fgujS0XZDGNuUhsp2isINVGIjGWCOkDAAtOQxCKZRMLrCYS78ihHyqVtDDhRgJHjXmSv+.NE0DF6gR0vLuWCCP1.3RvG3eo5EyMLyTCz4wvwbxOM3f8yYkIDkBNKXSaneVimWCGLOcUSypWIX5woRZYjLlKNdrNUzsedMqObmpsUSlpjvWfsycNqeLW2iUopS0X87PNnPPJkFjHGpINjeldKkAPiHgwbP94KNU25V3d3Ywb7IxgXRLlfmFwGINCOREgIggfb0PPrjkvXw0rKBGFZUIjLjGFWGee1KmEqMdPx4vcf5YDsUih77iLhxnr5Q7oglhj..CA.a.9Nnpk9S3L72kRLl5mOTpvFvL5wkOt.U9tYRat4s19IFoIZnA5DHZGAygqgD3l1E4VGytUjhvnjX3V.lArpTXJpyXlgz8T.0+DhlN1VJ1UdLT8W2Ulmy3JuIPvLY2hVX3JRzwwvNOKflUl.R4mZ9xycXonQ0IZMgN9PUFYX2sqwh3jbB3gsCEzShweC9ApScQJvw8WzaLVliRxEyej..sDfsMSTC.mgyBLE5OdJCNZI0DFoXkL8p33jHkd4uhPx3mUCmcxpgsmK3Zr8dbIwHbEqj5VSqZqoi35YQxTpjolAYmCUCrOTTIyUlj5QjvYbSERypPAV.lsUf8ZQ4Edof9UbGCKmdtiLRTyc.tqwzyKed4xP2H3tfs5oYtJevGYbUk.21F24TGJ9M8EA8K9rXR4f81gQAfgblBDaa3Nxcf+ZA+c6FMrWORoOfY2Wo4GHqT07xJfK7E2ZznKcOCdiTggPF7x11z7M58YXE4rICMUQmZX3LEgFLE6Z4+t6ZkuoJ0Qe4TTI6AWkNXJW9tZ0hR3bSGtDTApps829hj9aN5EIf1Xk7SHWjExIiV7a27O+q6gdbucHZRpiVTlKLGAuc3mBCp3ZbVxeGd7IZ0TqtIIZXTBWXudZaUSxyF0q46RjnyVLKy9cluXQuN1miVH3W535TjI4Ol2waobwp7GwQzDsUqjLmkIZq1JYgsKB3D+zJPPBe5.wqSYjN+8q+86khoUuYhYYXZ0ZdNIW341bG0bMjfB.m540qHWYaTj.enqPJ7c1M27keE9p4ZY9CXB.88XuWnj91cFNd6QgfgvTrYgDcwIyLQIYCnvuv3PlQdjwB877y29+13ZerP7F98Ev6yWNFW5RvHTd+o.iIC4dc+tvD1T8B.th+tO8SyDsneVMSCu0uGAdx2Tqr+rICfeX.kCQWBIdyCOdKYJ6bqajl+GvkL6h+E9jrYSyZujMaltIZBgFodA08vhYL5qYk.XRZ+IGk72yrF2rv6I1OSfo5eAkVzUukgstpFd6qpgsupFdmqpgqcUMb8qpga7gMz7itt+LsZh6ZCBsW+t12+875JMuVXqVQ+GgFGTA.

[Morphoice]

@d-healey you are a gem!

[d.healey]

@Morphoice Actually I need to modify it slightly because now it doesn't update when the value is changed.... one moment.

[d.healey]

@Morphoice Here we go

HiseSnippet 1490.3ocsWssaabCDkqsWiH0lhFf7bAw9jTqfhjh7k5fhHeQtUMw1BUNNsHMMfhjxhwqHE1kxwJA4s9gz+r19Gz+f1gj6tZWamKvnQ.1VbtwCOyLbn6Gon73XUDxq7wymxQdet+f4R83cGSDRTu8Pdek+47HsfRBGDJX7n8ITsJZd2KHSlFxQ6LeJINlyPddK+8Fe7JsBx94ed3NjPhjxWHBgNQIn7GKlHzKj1uyiDgg6SX7iESxYc6N8nJ4tpP0L.eK62.MkPOibJ+Phwrk7Q+.IdLx6q8YMa2bzlTx5a1rcKJs0laz5a2fxIiFwWu4ZazdyQsGQnMZg7VsKS.vefln4wHuU1QwlOXr5UR2FbhHVLDNUvhlnAvN6DuuJjYNhFoncGKBY8SItXDDk9Knwkcz3c8OPvDYxWPmeoUAdgG4IPukJBukK.ul4gWibv6ZfjWNHshCR2we.MRLUuPiAOeleOolGAzSwboyVzROZU+cUfERc8Ijy36GAKx7nx5MZTCC+p5CJWVBYkXHCwwmTnfo7aJWRHCERNdzLIUKTxsvtvezvWxoZLMhCm2JwVy6w1BGqiDxSqgmRhfMtOQxCK5RMLngrEd6nHx7pkKAaQoPErkXWPveGNE0DF6QR0vrnWCCP1.3RvG3Wo1EyMLyTCz4wvwbxON3nCy4kYKJEbQvV1s9YMddMbv7zUMMqdkfoGmJokQxXt3zw5TQ2+40rwvcp1UMYpRBeATm6bV+TttGqRUmow54gbvffTJMHQNTSbL+B8NJCfFQBi4f72t3Tcu6g6gmEywmIGhIwXBdZDej3B7HUDlDFBxUCAwRVBiEWytHbXn0jPxPdXbc71rWNKVahfjygdf5YDs0hh77iMhxnr5Q7oglhj..CA.a.wNnpk9S3L72jRLl5mOTpvtgYziKebIp7cyj1byUT+TizDKz.ctUBYXzUIvHIvojCskDny6xbsio2IRQXTRLzUfY.KKElh7LlZH8.EjJdJQSGaKM6JOE5Fp6J6y4bk2DHXlrcQOLbGI5zXPyyBnYkMfT94lu7bGVJ5TchVSniOVkQNVscMdDmjifHrMTJrKTOLDtYM1DxfbmKWHviDQPIPn.fnDZmu5NwXYaRRda9iSr1k0f3ZIS3uOYJCNzIUOFgXkLsocr5b6oM8ZhJBIieQMb1YtF1dhgFdaGeIwHbEqj5VWqZq9i35YQxTRlolA4siUCrWoTIKTlT7IjvYbSsTypPoX.lsSfsAp7hnTv9zRhGjj+KmYl6.7.iqus7aKWFlaATlsNqYtdDHFYLUk.mZS3blCsIlInf8Eu.MoPw1GYL.XHmq0vOqMzMsF7SK3m62ngsQJk9.l8PklejrRUycv.tvWV0nQWqNCdiTggP965TaFSG89brhb1jgl5qyMLblgvnnhy27e2y2xO9k5nubFpj8flrilxkuqgxnDN2LKLAUfoZ6jvuHYRnidQBXfWI+DxEYgbxiP9qJ+5e9PzS5sGQSRCzhhbg4H3sG+b3IMtQrk72iGelVM0ZaRhFdzgaauc5.XSxytq2x2kHQWr3UOG1Y9hE85Xu3ZgfeoialRlj+XdGukxsWk+HNhlca0JIuHyraq1JYgcdCDD+zJPPBe5.wqSYjN+8q+8GlhoUuahaYXZ0ZdNIW5h4bG0bitfB.m44sqHWYGoj.eX9QJ7c9M27keC9posL+ALAf9dr2KTRuUOCGW8QSvy0TrYgDcw2vY1kDEPgegGNYdbjLVnmm+kv+u8vtOVHdG+9B314qGiKcMXDJu+TfwjmCea+tvawo5E.bE+8+4OMu8E8SpYZ3t9CHvU9lZkCmMY.7uPP4vtKgDu4hGukLkct0MRy+C3Rlcw+BeRT1zr1KQYyTknIDZj5ET2EKlGbeKqD.SR6+bRI+CLqwMKbeh8yD38+ufRKFpq3Xqapi2+l5X6apiqcScb8apiabScbyOril+8rsmoUSbsMHzA86Zu+2yqqzbagsZE8er2TdkH

[Morphoice]

@d-healey Beautiful! I'm getting the hang of this. I applied some small changes:

HiseSnippet 1503.3ocsW8tSabDDeOfCE6zT0HkOWs59jcqkiMFHAhph4OlV2D.qZBoUHZz5a2Cugy6d5t0Dbhx25CRe05aPeCZmc26NeGPHQnVj.7N+e9Myry5AwReVRhLF4T8nYQLjyW4NblPMdmwDt.0eWjy25dAKVw8IgCC4TV7dDekLdVuKIShBYnsmEQRRXTjiyh+nVGmJKgL+72OeaRHQ3ylSBgNVx8YujOgqlScP2WvCC2iPYGwmTP5U612WJ1QFJmBw2htsPQD+yImwNfnEaAWzOQRFib9NWRmNzf0W+oaP8Wcs1aDPdB0eTmMViQWY0NrMXT5S5PGEDfbVtGkCg+PEQwRPNKssjNa3X46DVGbLOgOBxJ3PazPvyVx6ICo5TTSEsyXdHcPFvkf.qLXNLtnEFej69bJOm9b37aLLvy0nH.5rP4vawRgW6hgWqBg2MDRNEBokrgzCcG5GyiTy4nim661WnXwAD+x0RqrnENcY2cjfDBUyIjyY6ECGx0n15sZ0.C+o9ypVU.UkDnBwvGWpgo5GpVgKB4BFNXpvWwkhMwVye3n2x7UX+XFju0RLh2mtINQEyEm0.GQhAGOfHXgkUoAF3P1DuUbLYV8pU.WTITBtDaMB9GvYQMgRegPNJ25MvPHqC3JvOvexjKgoQlHcnyRfzbxOO7vCJnk1EU7tzaSiqOo0oMvdyxN0Ve5cbpZbFkUzTFy3mMVkQpyoML1vlU6HmDIEvG.1ExylmwT8o0paEMQMKjAB3kAodozgdhiXWp1VpCn.RXBCn+w4Y0ieLtOdZBCetXDljfI3nXV.+RbfLFSBCA5xQ.YAMEwRZXNDNJzHRHYDKLoIdK5amlnzVPvXvLPybf1HQYb9kZR4PVyXVTntIwChAO.M.a6U2.+oXF96y.Fc+ymqTXbXN7XqGWAJ+zHoo1bM1uVSMUBE.malBFZd07zT7rLYvXIAl7tJVaQ5sikDpOIAlJvT.kEbcSdNRMxeeITJdMQ4O1zZ1SbFLMzz11WP4ZeviS0U6xZnwNR7YI.mS77yaa.prKze3TarTVolDkh3O9HYN3X31SqQRZMBrvVPqvNP+vH3l0DsI8JjWVSfC3wPKPHGBQALNecOQo4NIstM6koRaqZfcMfI7+WEQgjNs6QSDKEYCsikWXx1rqIpwET1kMv44bCrIigAdyDeEd.tlgRSip0Mc+wL0zXQFHSkSg51QxglqTpkaJcI9XR3TltWpccnUrDqZdISCf4EKbnwiL6dEwrMIOKsinZtX1T5YZU+X0OVsJrIC.QSmW6BSMfMxwtZdV1ZyYEGFbz6TA4KekZZqiYxRK.fYVUafOYUX9ZM32Ufe6zpkYzJCPAr9.ohcnnVc8sxPbguJqffajmNdikggPE8lXqWbGeaJVSLcxHcG2EZLOWPX4T4Mdte5MdEWH6aguBBJE8gwtCiXhO0ZZTJlq2NlFUfnJytwuNc2nEdQbXEXE2TvEYB4huqA8p96RTjLCMusmqSAmcYW.Oxwtzsh6trjyUxHiroEZ3YHV29frUx5hmwq2y0VHQWN2gGzc17C86ZtJaNgeqqcKSNk+bVWmEJ3q6+EjhZusbsz2no81xqjdvrABdcnaVGHPgEMj+9LDo6e89+34YwzxOJUs7XZ4FNVJW4p5BoZgkYPCfQb6vGzc3R2VW3lqTYfyrwIMWf0KY4h0Hyze32gOpmQKlsoQqqC8ViqrK8yrG55uoBdMmjNMjnJ+DOsWRY.SAkdWk9sShDtZVwFp+yd22WZH9P2Ab3x6aNFW3FhQnW++iXL80xOvsWP.7rt4A3Rt68q25SiW5Ky829K2Q+hbpBVKrOA1Nn6aNX5jgv21vmAQh.ZBz2H4rf9tC64VY8BCYBp4v+.+jxrs9rSJy1YLQSH9wx23auwQ+176Yn.wjv78Xp3tu9Lt8UunAgl.eUg236W1TWSwUtqJ14tp3p2UEW6tp352UEexcUwm94UT+M41ZpRNwNBgP6OnmYwfiSOg9lCSmK5ewCjuFR

[d.healey]

@Morphoice Cool! You should put the namespace into an external file, then you can reuse it easily in any other project.