Help with css slider

[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!

[d.healey]

@DanH said in Help with css slider:

ChatGBT has run out of ideas as it seems the css in Hise is a lot more limited than browsers etc.

I've just been getting ChatGPT to help with some website CSS - it has issues there too. It can't be trusted.

[DanH]

@d-healey nope. It always forgets things you've already been through as well. Keeps chucking error-prone code back into the mix! But it does have some successes....