Help with css slider

[DanH]

Can anyone please help me with this slider please? I've drawn a box around it and want the value bar to sit inside nicely. It's fine on the left but at max value it goes over the edge. ChatGBT has run out of ideas as it seems the css in Hise is a lot more limited than browsers etc. There doesn't seem to be away to state the width of the bar...

Thanks!

HiseSnippet 1556.3ocsW8taaaCDmJIpaw6OXYnO.DsXqNAwox14u1XnMwIoMqMsAyoc6aETRT1DVhTfjJwtE6a6kXuD6UXOK6MneeeH6HkTrUSVZW.VBbP3w6N9i28i2c9DoHfpTBIxo1oSRoHmuzs+DtdXugDFGcz9Hmu18XhRSk3bQ6MIknTzPjiy7OwHvYwEP1ed+i1iDS3AzohPnWKXAzmyRX5oRO4wOiEGeHIjdJKYFsW+wGEH38DwhL.Oy65gRIAiHCnufXTaNWzSIpgHmUbaFP1xOh52zOJbqn1MCZ1Zqs2okOIxmriGg5udf+1QMiPN24fPlVH6qIZpB4rvdhvI8GJNmme.uloX9wTyhln9vImK9PQbn4JZjh5MjEGdRYfRg.ubxzv174gs65dLKjco7oguuwtAdpEyF.clqJ7luB7Z9uAuqARNy.oExgzRt8CjrT8zcL34KbOhCYyHBjmlEJ45hl6GuiaOAnAWuVBYD8PIr3RKpuom2pX3OK2sVMHWoz3yHR7y3B+l3e.WZ3.ptmHIUvgE0umc26U0hQfr.kZFaBjTHF7bQ.I94Bwnc4gGRow0MlUn7ZJJfjXFm1WOIl1eHkBdu1ZJKxUwrPfj9tZXbpPwzLAuCVRiIZ1YztfTefKMPJx3gcvFmPjMFHIgLCFueau1Mauyp362pUq1s1Y4t3GtBlCTWbHQNBWpHdkGBdJ.RDxN362a8ds60136H3RzHhjvhmzAuqjQhWEqHbUCEUxhLZnoi0MzRPVjPlzAmklRkADkEZojvPFePG7FoiMqOmEpG1A2b8sg03q7C.M31NXnNdBbCCyBngXs.OhRSwQvKKLiqffA1WHMgDKlsHTwdKEbaq7SYH03iN3VEmZt5v9oiwJADNwxA9j5s1XiUK+3s15PnwBfLecb0iH++aXBUYJvse.1qfZSZ.PcfPxoRUt8hLsIuzAyAhSNfF2PMjDJNui4JQ0XO.ZqCe1D9XAm2p1esvBN.FGbGN2F3JKgvig5CmTLvoJg4XSfvFuKfLHp6LvjwChyf3WQZ4gEWRFOOwXbyuVqFn3qIwYPLfXC.U3gc5PhzEzwfbFdG7CdP2JrShODlyz16ZLMRaC8WS9tDUlHPjTjXUtRnWKRuAi+.qAkqXbAaCd3ETGdaVuQiyL2qkwqfa548ckIbXepBTFB.Eu0rpk6iRtj0IFqvMLDfk6VM+qISJIm.Jf.qVC.pHNWjdt7YZix2Yds2t8ta1szK4Gqcyqk307pDuDhN3RXmS5x4fWdroBloHWC5YPpRUvAq3iPAHDB6whfQktxZCIvjNKRDlW3Eo2bxh2ZdaqJJ3X4npDg.jmHNilXJob9PJu7NMjvGPU4DLaEyZ1hmlJeWoxXQUwk6FkwyQff+Bgl9Rd8kq8tZKBt.+gaEEcs6YpAKEwwT40tsoKs7lLrNOKwmJWM+ZbohPmnps2tymV6shGLynnfeDmoeYJsX8M2eFUzSwzVr.gfpZaSwutnoXeaBDw.m7Yt1fLxB9YGmA8pi1mnIktA7HbJPYaMybYb1mdFzfHuW6ht6SUi.NsU2hVevTAezCcLxw042giah4e9dGDRYZtYlC6oBI6sv4RhQIrvvX5IEUNlAi+ILYVZenrtQ16t6e7j+5s+1iRlcpLDJgLd1akJKJhM1NNEzrHQoAjcTBLkEx4acekB53QiHYwZrZD3Gf3NhFdpvpukQav46AOk+j2rpErxeP4baKdmKt3hWYNKlllLUZ61sipJskQ7RKszeaDaZPVwEWXjp.NvovN6IFaFRAJwBzzeF57GaVht5POv3VhvLnqe0YvLSpVrgI.N6fOlgaLuYmLaP5+vfYd23fYepPbI2SXPMpqGiycMXDXk+efwhwY+J2ChhnA5o.bA2C+ka6rqeji+mfN+Pg3iI.Uz7d3EYI8AdP.ENcngdrxPxly7tNesmYsIBzmxCsKLzkhMaZV6TrYyxMgGA.04MA4UCLCL+4VI.l31ubwhv2xAViuRY.j4wG6MAAUc0ULr0s0v12VCW+1Z3F2VC271Z3V2VC29ian4qWsaFLGQ9yFD53SNvV11w4.NAXfV1J5e.7YRCII

[It_Used]

@DanH add margin-right: 2px; in /* Value bar */ section

Snippet:

HiseSnippet 1496.3ocsW80aaaCDWJIpawaqXAXe.HZwPcBhSk+ShcswPShSxZPaZClay1aczRT1DVhTfjJwtE6s8EceC166grijR1VMosCAqIvAgGu63Od2Od24yE7.hTxENtUd8rThi625MXFSMt+XLk4b5QNt226LrTQDHqnCmkhkRRniq6p+rVf65q4X94ue5g3XLKfrPjiyEbZ.4EzDpZgzy2+4z33SvgjWSSVR6V6eZ.m0mGyy.7rpmuSJNXBdD4kXsZq347Lrbri6VdMauGNpQ61DRzd9Ooc6n8ZGfaPHsZ1p0vP7vFc5DzY21cbbu2wgTEWLPgUDoi6ZGxCmMXL+Jl8.tfJoCiI5E0cF.mrU7I73P8UTK0o+XZb34EAJoC3kyWD1V0F19Auyngz4xWD99dyFnEVrb.zckxva0Rvq9xvyeI3cKPxcIHslERa3MHPPSUK1Qimuw6TFjMivPdZYnX00Yk2dOu9bPClZmD7DxIBXwbKptmu+1H3Oa1qREHWIUnKwBzyY7g0Q+DpvvQDUedRJmAKp9.ytOnrES.YAR4R1DHHPL3E7.b7K37IGvBOgPhqpMKW4cjD.IwTFYfZVLYvXBA7dkcjFjKiog.I88UPnTtjpnbVWjfDiUzKI8.oCAtzHAOiE1EocBVTaj.GR0X7gM8aVu4S1F8vFMZzrwS1rG5wagX.0EEhESPEJh15wfmBfDgnK5g8a0uY+lZeGAWhZQ3DZ7rtnCDTb71HIlIqIIBZjVCEYpplR.xh3hjtnrzThH.KMPKEGFRYi5h1Mcpd8UzP03tn5s5.qQ23G.ZvsczXU7L3FFlEPBQJNZBgjhhfWVHJSBACzPtPGRLX1fPI8cDvsMrmxXh1GcQMxOUq5v9oSQRNDNQhQCwUar6taW7wemVPnw.frgp3xGg8+qoCUYRvse.1KgZcZ.Pc.WvHBo0ddlRmW5hX.wwBno0jiwg7q5puRDExGfVK3ydvGC37217qAVvAPYf6PVafqr.BOZpObRw.mp.lS0ABS7NGxfndKASJKHNChe4okGmeIoLahQ6l+nREPwKvwYPL.aB.k3gc6hiT4zw.KCuK5QOReqRvhQTVMQdv2F6WPYwCgXelxD.hIQJS93VHAEPUGVhD7DixkxGJd5mv3OvZP4RFmSAgWiAUgGrUqU6R8kcSzVn599+XAK.1mHAkgnR9CPiZVeTPvLNQaEpl99tYuxjBEdVAiEPADsUJ.P4A+7b172t0Jd742rSyC1qWgWrGqYyakMV+lrwDrJXNrsLQKwb9wlxo5Je0HWB4OYNwrjOB4fPHrGyClT3JiM3.c5LOQne1mmdsLH+c76HyqBYHtxDNGjmvujjnqyb0XBq3NMFyFQjVVmoLZESEUc4vaTtLuT4l8hxXVDvYujqHuhUcyJuux5fKPe3VQQ25d5ByBdbLQbqaqacK9TFVkkkLjH11dMlqHzdpbOOuOdOukaIm+JZIE4rSYT0qRIrOViZm7lK59i4nBTUY5Nd+7tiCLIMGJzD7q7LAVGCfWdtFm2b5QXEtvMfGgSApeqn5Kf6QjKgNE1ltq6cDQNA3wFcy6ABm1m8PmN+.QA6Oa9heWruT2sSOX1y3B56fyGG6.CjkN.plmq29+069ymZnVKfMae66uERNceID8dMzI5P9TcOenhEjf+UnQZrd4vQEyds98t95qei1FphjrPZylMiJKsgV7Farw+nEqaxUxEWam26Fil.CEwCyfdykmTROOY9F.Upz3I5QPzOhlsbd4+swm9uBwM7NmBEMtcLtxsfQfx7k.i4Cc9cdGGEQBTK.3Zdm7aeYlvz4Wf9yPkwyvJAEXOduLKY.joCHvoCsci0OkcWQ+nyt1WuVGAFPXglEZBQ9l00qcy2rdwlNIXfQ91.6SU8XsesQBfIl4q.rN7cQf0na7F0wIAlx9sAAkc0MLrwc0vl2UCacWMb26pg6cWMr8c0vNedC0eInCxfF61mMNNmc9wlZpttGyv.CzvVc9W7JsoXG

Code:

Content.makeFrontInterface(600, 600);

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

const var knobcss = Content.createLocalLookAndFeel();

knobcss.setInlineStyleSheet("
.scriptslider {
  position: relative;
  background: linear-gradient(#303139, #222329); /* nice dark gradient */
  color: #C4C3C3;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  padding: 5px;
  width: 148px;                  /* slightly reduced to keep fill inside border */
  font-size: 12px;
  height: 25px;
  border: 1px solid rgba(255,255,255,0.4);  /* subtle border */
  border-radius: 2px;            /* slightly rounded corners */
  outline: none;
  box-shadow: inset 0px 4px 6px rgba(0,0,0,0.4); /* inner shadow for recessed look */
  box-sizing: border-box;        /* include padding/border in width */
}

/* Value bar */
.scriptslider::after {
  content: '';
  margin-right: 2px;
  position: absolute;
  left: 1px;                     /* inset from left border */
  top: 1px;                      /* inset from top border */
  width: calc(var(--value) * 100%);  /* scales with slider value */
  height: calc(100% - 2px);          /* stay inside top/bottom padding */
  background-color: #0383A6;     /* value color */
  border-radius: 1px;            /* match slider corner rounding */
  pointer-events: none;          /* do not block slider interaction */
  transition: width 0.08s linear; /* smooth movement when value changes */
}
");

Knob1.setLocalLookAndFeel(knobcss);

[DanH]

@It_Used said in Help with css slider:

margin-right: 2px;

Beautiful! You'd like to think ChatGBT could get that one lol

Thank you

[DanH]

@It_Used perhaps you have an answer for this one too

By default the ModMatrix will show "No connection" or nothing at all in the sourceindex column and targetid column. Is there a way to change these to a simple "-" ?

[ustk]

@It_Used @DanH
The slider is a bit off...
remove this (because it makes part of the left to disappear)

margin-right: 2px;

and change width to account for the border thickness

width: calc(var(--value) * calc(100% - 2px));

[It_Used]

@DanH alas, I have never interacted with the modulation matrix at all. While I'm studying the builder

[It_Used]

@ustk I have no experience in css at all, and this decision was worked out through logical reasoning, and it seemed to me that everything was fine with the progress bar on any values.

[ustk]

@It_Used yeah no problem, just a little precision because I like when things line up perfectly, my psycho rigid condition I'd say
You can see with the smallest non-zero value 0.01 that the first bit is partly missing

[It_Used]

@ustk and that's it, I looked, I saw the difference, my progress bar was moved by 0.01 to the left, at first I also wanted to subtract -2 from the percentage, but I just didn't understand how it was, I subtracted (without calc), and the maximum width of the progress bar became 1px. I am also a perfectionist, but due to the fact that I did not know, I could not bring the idea to mind.
Thanks for advice!