Slider control for opacity?

Has anyone ever created a slider that would feed its output to a value, like transparency in the rgba range? Just wondering if I could recycle something… :slight_smile:

The easiest way is to use a standard HTML-control:

(here the changed value is written in the red cell below)

slider.zip (176.3 KB)

here an example using a custom slider (built using Antetype). The slider is linked to the opacity of the red cell covering the content:

It works similar to the scripts in the Interactive drag the knob contains a mouse-down-event-handler which adds a mouse-move event-listener to listen on the mouse-movement. The Event-Listener is removed on mouse-up.

(I use the Event.movementX which is not available in older Safari versions … ).

slider2.zip (567.3 KB)

This is so amazing. Thanks! You really need to add a UI for these things. I cannot be coming back all the time begging you guys for code snippets :laughing:

just keep on begging :grinning: … until we provide a UI

1 Like

So how would I change the script in order that a number is set from 0% to 100% and the fill behind adapted accordingly?
image

like this?

or without slider and drag the grey area directly?

slider3.zip (165.1 KB)

let slider = targetCells[0].DOMElement.querySelector("#cowbell"); // <input>
let wert = targetCells[1];			// cell to display the percentage
let meter = targetCells[2];			// meter of the percentage (opacity + size)


// updates the text and meter, according to the slider.value:
function updateControl() {
	at.cellSetPropertyInState(wert, "textString", slider.value + "%", wert.activeState);
	at.cellSetPropertyInState(meter, "flexWidthPercentage", slider.value, meter.activeState);
	at.cellSetPropertyInState(meter, "opacity", slider.value/100, meter.activeState);
}

// initial value 
updateControl();

// add event listener for change:
slider.addEventListener("input", (e) => {
	updateControl();
});
1 Like

Dude! I’ll try that out straigtaway. Thanks!

Ok, I tried to make the edge of the slider the control but didn’t succeed. You seem to be using a standard HTML element as the slider but that’s not something that would work for my prototype. What do I need to change to get this to do what I want?

well I used the simplest way :slight_smile: the HTML-element does the whole mouse-handing and calculation for us. Here in a manual way:

(note that the initial value is kind of hard-coded…)

slider4.zip (236.6 KB)

Can’t thank you enough. This is what I need!

This worked very well. Would it be possible also to keep the slider proportional when the meter gets resized? Would it also be possible to have the entire meter scrubbable so I wouldn’t need to find the edge? Here’s what I mean:

Oh, another little thing is the chain link between the meters. It is to sync both meters. There seems to be no official function for that but maybe it can be scripted?

ah ok, I used fixed width for the meter, have to change it to flex-resizing. Just to make sure I understand the desired mouse-handling: mouse down in any part of the whole widget, change the meter-width according to the horizontal mouse-movement, until mouse button is released?

Yes, that would be awesome!

For the resizing, we only need two small changes:

  • change the horizontal resizing of the meter to flex: image
  • adjust the update-function in the script to set the flexWidthPercentage and not the width:
function update(newWidth) {
	let percentage = Math.round((newWidth/sliderWidth) * 100);

    // before we directly set the width, now using the percentage: 
	at.cellSetPropertyInState(meter, "flexWidthPercentage", percentage, meter.activeState);
	at.cellSetPropertyInState(meter, "opacity", percentage/100, meter.activeState);
	at.cellSetPropertyInState(label, "textString", percentage + "%", meter.activeState);				
}

The “active area” is currently the handle-cell, since we do not reference it in the script, we can simply copy the whole event-handler:

and paste it onto the desired cell (here I use the whole control, the meter would work too but if it shrinks to 0% it will be impossible to grab…):

and we can remove the “handle”-cell afterwards (which is not needed anymore … ).

slider5.zip (254.2 KB)

Thanks Felix. I will just add the e-w cursor and this is going to be quite exciting. I notice some jerkyness (tried on Chrome and Safari) and it needs a few initial scrubs before it works (but never really smooth). Can you confirm this?

mhmm, no runs smoothly in chrome too (80.0.3987.116) for me.

I’m seeing this jerkyness in my In-Place preview as well FYI

Here’s a screen grab: