SliderPackLAF

[Oli Ullmann]

@DanH

You can style a SliderPack with the help of CSS. It also reacts to hovering. Unfortunately, I'm not very good at it. But I can give you the script I use in a snippet. Maybe this is a good starting point for you.

HiseSnippet 1466.3oc0WstaiTCE1S2NKj.KhEwCfYkpZZoIaRSRa1Tgn6l1BUz1MhTV.wOV4YFmLVcF6HamjFPHwyAu.7pvKCR7FTN1yjLIMo6k.6OXTSR8wmKemK93yzVJ7oJkPhbxe439TjyG51YLWG1Jjv3nSOB47QtmSTZpDmP5Yi6STJZ.xw4dekgfSt0Q1m+9KeFIhv8oYjPnWHX9zyXwLcF01G9MrnnSHAzKYwyvcsCO0WvaIhDC.7bO2xn9D+qH8nWPLrslK5qIpPjy1tUoA61nAodspU8a7jF966SZP8q3se4cIcCp1fF3ETqdMBx49GGvzBYGMQSUfRelHXbmPwHdhAdASw7hnlEUPc.KmPF0JjEEzdRvQgPNq2NKTcujP0m5dNKfMkdVH6isafyjX1flyZuJHU4s.RNy.o0SfzCc63KY80Y6XvyG3dJGxfcIPtYVnjvKZs+38baI.N35RwjqnmHgESknvdkKuCF9ZqCxmGxOJMtSDKfJaCImyd5I3u.OQXeIE7oyD9jnyDhqdJO3DJMpvxDrxLh0ipaIh6K3vhBOZFddDH4LKKon5ET9bXwXo7O9weFtUmNE+exS947.iOdJOhwocziincBoTHljOeIkMWor7ZNVj+WxmyC9smTLfGTzGJTjMwxddE1u5N1+ffQNOgD3unjDvFnZhq1+5Cx+qPHZ6swV8i0gTLiGvFxBFPhvI5WUBu8iyWxXlDBFi4mjsZh2DuIn4XhrGi2DWtTciRWNVHEfRmz+JUYqo19RvpMa5Q6JjTLMhFCJFOBZJf8n3AP0IVKvALU+HxXKDGRhFPwRpulv6EQuM9lnq4w4lKEVCIxBEKxzz3jNMlvT9bFT88zMAD.l2ZRnDxvKi.GFAroCsT4BYLIhYfXhoSgFfWnvzePDb.vxX9bX3Ijx5Epwht2oWjKgklVwKTob4MvamhQK6aYpoyMhEnCahMauXVsrMAj3CWFxTXklAQFLSafkwvdBsVDiUlUDskTJ58ngjgTENhcEESRcuDrOjJA8LsnnD3RF7lnKvpaLMcdgXDlD.QDQLnXSeMr+.EvE6mIZFbxGBpLdOP+ZIgqXFZXHegUwBADXCEfsvztcgHi5txsMsbs7xd6OEiYWWfwwJnvamESy35k2XG7nPfjIkmgjl3aqPnXcWk06VFNH9Z1P5+BfzXVfrvoQM8ZnfAbUn12FKhHdznjJ6omwqrW0cprWYymsN3MoQvjiq1N.45CYKHgzDuqcowjEgp5d.CRS0HPaR1eBcsn+czOAHdcQUHIPLxVKZ+TC93EAvZIdn0DX+HnHEa5zkjwyZsYncqvKKFFCXxYWy9sI5vrFbVGAJ+.UjDXuCTUOCU21UpmVOC24zc.22VhJ3WHzzmyKrkANvt3auU2tKcOyMaRQTDUtzsMi8HeUBVfOH1iJ2IoiwTFgq4me1g6+lM6PZKwYXTvOkyzOuOMc8Ihn.yLAl+ewIMPo2Tal4HEg.Tz1IN9jzINxtECw.E8.2Yt3FYcCjiqiYLu.hFFL6mb2qVI3o6ma99Isfup97+aViPe2oGYLRJbAjCdSeSAsIn4bDcHLTZx.S4bOhptBJts7lNDBLL7agyc8zIX+sWb33rwY+wCscsMt8uCNdRedyp+D1zq2j4bSBJY8G.Eb++5Fzn4otqgwat4lQlypYhBTphVbLPX.TQf4tn4mJ0Lud5FP41biBZF2yzOb7ryy+VLpZ4W4npuoP7gtsYZ+vkiw0VBFgT76BLlNf+CbO1dmTF.W28jeXUml+0X9uULPC8jOmnkLnjx8hAwcfrrOErNmSiTl78ZlCiIqKOozoCkGTNsX3lzMqXV6jtYkIahhI9RwK8SNBadEh22RAvD29JV4f20CVimdhMKNGCuQyK88mWUKH3tqpfUWUAqspBVeUEbuUUv8WUAa75Ez7BmOc.LxUxwFD571Ga6A53bL2LBqsZE8O.K7ZlC

[Lindon]

@DanH said in SliderPackLAF:

@Lindon Well I've tried... Can't get it to work in the snippet.

heres some level of improvement:

HiseSnippet 1216.3ocsV0uahaDDecR7oBsWUup9.rh+hbv4yFxGjFUEHjPZTIInCtSsMJ5zh8Z71X1ktdABs5dv5aUeApRm0FvlK45GzdNRDMyr+142N67w1QJboQQBIxHeuYinHiOyr6LtJnY.gwQmeBx3yMufDonRbhpimMhDEQ8PFFadlVgQtsPwe+9QGSBIbWZpJD5MBlKsMaHSkpsS8uiEF1h3Q6wFlY06T+bWAuoHTLF3yll1nQD2aICnWRzKaCSz2RhBPFO2rhee2J96WslyANGr+NG33ras96XWw0a2CpVcupd9UpQ1qF.5Im5wTBYWEQQiPFacrvaV2.wTdhCdCKh0OjpEbPcAOmntkHzSeD0ZQMCXgdcVDnhPvtzIMrsYRX6qLuf4wVpOM78EwFvoHxF.M1XU5s4JzyIK8ryPuGgRFYnzVIT5YlcckrQpTKZ97olmygaSeBbOkkJIqEsweroYSArBtxZH4VZKIHrDQw8rsKige19v74g6pHEdBQh6Fx7nxNvkkC9avKfOfpZJFNRvAghExrlBuG5NsazJCNWIEhFsEtjv1BwsM3dsnzvhZPwK0RRGvzYjsFycULAuXAOIYZaFmRjItoPYr+BiCJiE8+osy+q4ymCPhIfq.EVDvMGlO2.qHp5LIwiA9tEjWV7ZsUlhNLISzoL1ANz1waiU+AIZST5XaeilW4VrgW6bCtT59ec0avOGWzwxF+hXkSHgioWJjCIgreg5EicfkO31WQcUItNFn8MkpTFmYayHT4lWrS4r9PygbIjPLApTOBGepRXZQ66Z0ZOG8eai+5UrnAnn2MWb6Cwu7k3dArH7IBZD9RgJfwG.LuiHRmGNCyEJLYBgERfrR7QZtqC8+W3doJfYaqcSNBYYWx+hrlF.WFae3Bm0HjMfS85A7t3xPZiHsbY701ksKq8R433RYbAW3ZUR8Jj4z0kLKB+ZtG0GRY79vmOJSEPkGo4EjaFIBoVijLHYVI00B5rp3KPL7k+cw4moI45CxCxgiyegEtH4DK3PTldEunN+LW92kG+9l78eTa5hEoHLjJeTy5Fqx+JfE4iG1mBowwgukKDZdrZGIyObGorMLcSpcyrPA+bNSc0HJ+C0FEMufW28ZNq.2qh6c8ky6ckFPQLnM0SMyDgQwTGnnwFvl4QTDjgsY0JVxyN8xRs6WiueSKKqpWA+3Wpyfe9rZyrYGW4JZup+XoId8pteSD50mehF4bN.zAn3HpTwzmdiSnSf4WI8SyYdBM5VkXT7Zm2XCla9ufw2kNr6GpOKqvTlmJHUwr5AT1ffLCMY0SqTAsOAc+uUMV+xFUUzpmNc58qpVq8d3SqMJlKMFJFyyr035nGN8.laI7FGRTqNLSOxetAHeZkIH5oD7HlZV1mD7+1Dt+oT7YlcXJ2fGmia7HbDt5+Xvw4uK3olm56CsGSI3Vls99ONOB.8JwXEzw9BhRxfTMyKGOrKjA3RAuy4zvnEEKyks0x5HPWJ2KVPmnL2niV1XtQmEFQCItRwacSpW0u73Sh0.bhG+JsbvyEAY7xxyz37P3gPu00c0s5A.qrt.qtt.2YcAt65Bbu0E39qKvZ+8.0uSswXkXXRYCBcQmSi6MZXbJWOPLNaE8m.olTd0.

[Lindon]

here's a version thats an addition to @Oli-Ullmann 's contribution:

HiseSnippet 1569.3oc0WstaiSDEdbaMZSfUvh3AXXkVsocaRct2jUHZ2zVnhdIPJK7uUismDOp1yDYOIsADR7nviHuAkyLiSrSS5BTfePTSilyk47ct5i6GK7nIIhXjUwqlMlhr9H6Ay3xfdADFGc5QHqO11KIYPHymF2m3cM5MyFSRRn9HKqM+JkPVE1Bo+76e4aHgDtGMiDB8VAyidFKhIyn1+fugEFdBwmdEKJmzMN3TOAumHTLA.zl1NnwfEIinWPThsgM5qIIAHqcrqMz0q1v102uZmpcZ2nS0pM22sgSMO+lcpWuUc+g01mzZePoO3XelTDOPRjzDj0VuQ3OaPf3Ftw.ukkvbCopCUQC.KaHehHzW4hJpndArP+9yiTIH3V5mE21zD29L6yY9rEzyheehlANSi7APqMVFdatD7plGdN4f2ZfjUNHskAROydfWLarLiiBOen8obIMdHAxS4ghQVzFW8D6dBPBtrRD4Z5IwvgEZTpkiytX3ea+5hEgbUhDmUZb1gmf+B7bk8hofOclviDdlPb8gb+SnzvRqSwp4TaDU1SDMVvgCkddNYdtRS3SNRURnxULvR3Qoyd6843dCFT9+IeJtjCnbwS4gLNcfbVHcP.kBgkhEqjnSWIZYUcIE+4hEbgeGEKlv8K6A0JwcwwibK0t9t5+fXQAWQLHe4XhOaRRWb8w295h+BDh1YGr99wx.Jlw8YSY9SHgXy8mTAuydEqnLigfxXdlDVWb4xtLNIdV4ojvIztXuPRz3ROsHF93rq4WHG4UZJItTYiTaieEtJdOrgDwyaRLwa11amW70wWwda7N2mN3YQj3QLdWrSklJmpPZ.vHnjdqzLVQGDVWXhTBJrS+qR0sWDVtBBHc65RGJhoXZHMB7Y7Mv3KrKEOA5cvRA1mkLNjLSG8z9GNl5II7QgTcnKera9ksTL7kubs3xfdljFkg9hETv5GnuDf.XesMgxakrLBLq..mLPSkKhiHgLEFMlNEa.fUA3IgP+oVvhETA8.JaTfDKF9ftQAiHcSyONNuXQpvjUUsaEtg4KC5hUrWshyQmbL9vUArDbhjAQFLSpfkxvtBoTDgSTmHRMoTz6RCHSoI3P10TLI08LXeJMFtmEErU.WRgWycAV8E57oNgdg3FLwGBIhH3lUycwdSR.wX+DQxfISPTkwGAFPFS3ILEMLjvvIQBADYCDfwvzgCgPyJMFyStc0Rs9dR8OkiX2VhwwIPo2tqlmwMcdwt3aB.RpbdFR5hu+EBkq0Rzt25vAwSxlR+G.j8yCjUFUnZrvJWEp90whPhKMzTZm0YUsU8cq1xQ+048zANeRkQn4cz5gTEFC4LHszEWSeTY3xPw8HPfXUQIPadQvb5Rw3GXjmt7yUba4j.hu3FcYo9aC3qaHftWqblUbWskfAbPIKVMS1j9yFBqncuXMKB1eYdmrheehLHaTr1efZQ3JLQYMmUAVyE.aEOpYZ0M7.xgS3d55UA+BgjdIuz1J3.bw2m0vgqkm5wvwhvPZ7ZYq1WK98oXI9jHWZ7tl4GKDD1IY4Ecre3EcxuGV5.xbBJ3mxYxKGS4Oz1YnzUITKEkhJv7R8JQeZ5JQ41mkAa+7T6baUfzPGfn0Fvk4SjDjkic8ZUtpdyu8Us4ScZOvce9zKo.gNpys5I8uZ5kGK8O5UvQV6dHz2e5QJMSw..G.hiUEnJu25H5TXsXyZZErOhlbMTrpkMc0GXOs+FH91E6P+qu8fY4OnGFufvuM6.yH7rctYGj0sq19uZmNsZ1rQsZUQYO0TwnQsNM5zpcsNMQtilS11ReGKtgZJR2c2c2X5INLB5AxYL7AnUWSEVPV3qdXzxaMqd2hTFPE1RqppVGUMObV9283esUo+qBwmY2mI8BVOF2XMXDJF9u.iou.xSsOV+LoL.tk8I+3+MusA56DSjvz3yIxXFT7YewjnAP52iBVmyogIyaeRO6LuTY.k66jVjbWJyppyVoLqNmIJh3EKdmmoCV8JNOQSAvDW+5fErOWcFungMKNGAuw0677V9pVQwZOVEq+XUrwiUwlOVEa8XUr8iUw8+yUT8BwGNAV4xz1fPm2+X8zRKqi4pcX0Uqn+vWKjbN

Edit: settting the colour of the value text...
Edit2: now without the top right value box...
Edit3: ...and finally roundoing the number down to 2 decimal places...

[Oli Ullmann]

@Lindon
Oh, that's great! :-)

Do you have any idea how to modify your current script so that the value is only displayed when you move the slider or when you hover over the slider? Is that even possible?

[DanH]

@Oli-Ullmann @Lindon these are great, thank you!

[DanH]

@Oli-Ullmann said in SliderPackLAF:

@Lindon
Oh, that's great! :-)

Do you have any idea how to modify your current script so that the value is only displayed when you move the slider or when you hover over the slider? Is that even possible?

@Lindon I have this question too! Also, how to do a gradient on the sliders?

[Lindon]

@DanH said in SliderPackLAF:

@Oli-Ullmann said in SliderPackLAF:

@Lindon
Oh, that's great! :-)

Do you have any idea how to modify your current script so that the value is only displayed when you move the slider or when you hover over the slider? Is that even possible?

@Lindon I have this question too! Also, how to do a gradient on the sliders?

well we are at the limit of my CSS here so not sure how to do this...

[DanH]

@Lindon I'll try some AI Thanks!

[DanH]

@Lindon @Oli-Ullmann @ustk

Took some to-ing and fro-ing but I got there:

HiseSnippet 1704.3oc0X0uSibCDeCvdpIsmZup9.3dUmtDNRHIj.jfpJeSQkChZn209Wmb75j0hcsSscBDppTeT5qRefpTeCtN1dI6FHzqGp2ezffHOiGO+lO8X5HEDpRIjd4Jb9jgTubehe2Ibc3dgXF26388x8o9DkpaDKfJ6fIW3s6jgXkhF3kK2hGY1Tt7K4Y+7Weyt3HLmPSI448JAiPOgEyzoT6r82whhNDGPOmEmY2M19XhfumHRLB.zh9U8FBZDOfdJ1rsE789VrJzK2x9s5uVqMWuJdsfMITBoQ+lardCbsFq0DSasVebMBcil0I.HezAALsP1Ui0TkWtk1UDLoan3RtSAuhoX8hnlE075BZ1Q9PQTfwDMT81KjEEz4FOkxCNkNo9sEc9suv+kr.1T5o9uOyx.kJQVGXtElEdKNC7pkEdUy.u4.obYfzRNH8D+tDIanNkiAOer+wbMU1GCworPwsWuEtHu+dBXGbckX7EzCkvhoRTb8pUWAA+ozVEJ.wJkFklZbxNGh9ZzMBSjTvlNQPvQmHDWrCO3PJMp37DrVFwFP06IhGJ3vhhOMyddpQR3SFRUTT8cTvL3wHypq9kn851s7+S9TXFCvXhGyiXbZW8jHZ2PJEbKEJTQYCWJ6dMUIE9kB46AeOPJFwCJSfbEYajVh4pgXI3L2B3KjvtKKwArQp1nZCuZqB+J3fVdYj8zQ5PJhwCXiYAivQH2oqpfVd0BULJwQvnJhKb0FUtbOFGKmTdLNZDsMhDgiGVr.B9TcE6WP7gTbLVVrraOkPu.UCsJxQBSHijXxjRkxr64wF3VBs7sICVULVNfwAyoRKiAketl9pKiNmdkFo.6jwGXrn78AanbebLKZRazNRFNZqDhJ10foTqt87rTtjxFDBlaOnw.PSCmUYbDa.nWB0TcrEBTwYC0LAGG0FY4orNT9n3dToUiuyPTRz3bPr1s6Q6KjTDMhFCLQWB8LQ8nnQPAKRKPAL0vH7DqNrNVjjRzX9fHpMh4hqPujDtFLiD7nInKCobDlnYio2Jz11Q0Egsvy4uMx55KWxBxrhjfyYxJd9yMEqFu9QlrMC76KEwHllF6NmZnhZwvRFC4qN7v5qa9AUrmPqEwk.aUGhTwBA7k0AwLNVqOLiGjEC2MzFYpNvxxCRzDbtH24rRB5S0ZIT0msRFEVqZ0mYxgLPcYzqoOGbwf+05SgdFF4YXnArCP1noPFCAWSLvY+23cE1T2QQPSO6FKj2jNGZyaPh92aXJeXRpkKyG.zzrbW4hoGV9KYA5v1V7d2B4p17TmMbdHSAY4LH7.daCrLJ14OPJyJr1RJA88ng3wTE3DufhvIlmC6ioR3bl1GnBXR1.f8r.sZPxPgKz.Y78ThnQZpM+vl6cJj5gC.+jHFTm4FNDYjBjkcM1HiBb0lZQb1PLjJcSfOT.H.Q62G7W2oIzMocss65Vc+d+SLpOMynwZlellYjBMn3+VZ.UsR0lJDEqnkY7xhQ56q3Hst5c1B3AYH8FjM+Ny4M0NfRw6pX6WkiYWUjwQJ4fdyqhYSyQdYHPpzV19J24JCoMGmDAIcVn5hUo2MYnM+HjSaF9cv5vRSSsaifduPhCbDNUa4bUYUHNPboMi29aS32dQvwd2hhll7S.pvbC8GwI1jKA+TgldFuXICb.tnaype+4xyLchTDEQkyksYLV4+jfEcWBrhqCvzMBipM67e92+7eYGOMoOalMJ3GyY5yFR422PqdISXYlULAUf501IE+7jIEyLlOCFJ7w9YF1xyBc.h4V.Nr.rF6kqp+Z0qD8SQG+hNC94i1buCzAWel7nCN8EWy180qy1jOVclk+3prcarmm2Ob79FISv..G.hCM8YLVet8oigWK3ldMu+9T0EvcD18lLQHL956AhuZ5SK9sWs8jrKrsSmR32mrsqIb5SQXamVBXdTTsVsVuYyF0qWyK8tPCiF0a0n05aTuUSOWB+NwPBdlSBs8MEm.sG8mu06s1yOsySB4+v8zn6LEO79AQf4ZkYeTg4oWILfLsYlj2Lstom0jrOM6+rWZ7uEhOwuCSSBmOFWXNXDRJ9Pfwj2m8X+CrWjjBvk7O7G+v7XLuuGtJ.tY6kXsjAIg9mNJtKDpITP6bNMRcSYTx5pl0FOPWJOvt3svmDl0Lqykvr1ML8hwDo3MDWkr4EfejkBfIt80x48eoYMZZgapeNFdP5aHjYOp6HX8Gpfq8PErwCUvlOTAW+gJ3FOTA27cKn4+WvNifa2ckMdduryA1tl4xc.2LMpMa06ugFlGif

[DanH]

@d-healey I'd prefer my sliderpack values to show 0-100 on my UI - easy, set the sliderpack value to 0-100. However the sliderpack also controls another sliderpack who's values have to be 0-1. Hise doesn't like me using the '/' character in the callback. Any ideas? The reason I'm doing this is because I can't just multiply the value by 100 in CSS.

Line 6791, column 24: '/' is not allowed on the Object type

inline function onSliderPack_NOTE_LENGTH_UIControl(component, value)
{
	SliderPack_NOTE_LENGTH.setSliderAtIndex(value, component.getSliderValueAt(value / 100));
};

Content.getComponent("SliderPack_NOTE_LENGTH_UI").setControlCallback(onSliderPack_NOTE_LENGTH_UIControl);

[d.healey]

@DanH value the slider index not the slider value - you know how to get the value because you're doing it on the next line ;) component.getSliderValueAt(value)

[DanH]

@d-healey yes, it wasn't working and I wondered if I was doing it wrong, hence the v in the wrong place. In any case, I can't do:

inline function onSliderPack_NOTE_LENGTH_UIControl(component, value)
{
	SliderPack_NOTE_LENGTH.setSliderAtIndex(value, component.getSliderValueAt(value / 100));
};

Content.getComponent("SliderPack_NOTE_LENGTH_UI").setControlCallback(onSliderPack_NOTE_LENGTH_UIControl);

either...

EDIT - I can do:

inline function onSliderPack_NOTE_LENGTH_UIControl(component, value)
{
	local v = component.getSliderValueAt(value);

	SliderPack_NOTE_LENGTH.setSliderAtIndex(value, component.getSliderValueAt(v / 100));
};

Content.getComponent("SliderPack_NOTE_LENGTH_UI").setControlCallback(onSliderPack_NOTE_LENGTH_UIControl);

but the linked sliderpack doesn't read the value properly

[d.healey]

@DanH component.getSliderValueAt(v / 100) Do you have 100 sliders?

[DanH]

@d-healey no right I'm getting confused, obviously. 32 sliders. I just want to send the value of the sliderpack / 100 to the next sliderpack

[d.healey]

@DanH Why not set both sliderpacks to use a range of 0 - 1 and then multiply the value for display purposes in your LAF function?

[DanH]

@d-healey because I'm using CSS, which can't multiply a value.

[d.healey]

@DanH Ah i see,

So the slider value you want is:

local v = component.getSliderValueAt(value) / 100;

Then you can set the other sliderpack with:

myOtherSliderPack.setSliderAtIndex(value, v);

[DanH]

@d-healey yes, that's what I expected to work, but the value received is still 0-100. Let me make a minimal snippet

[DanH]

@d-healey right, don't worry, finally got the right combo thanks!

[Oli Ullmann]

@DanH
cool! Thank you!