Skip to main content
killerQueen
Participant
October 8, 2021
Answered

Slider that goes from 0 to 50 to half and after half from 50 to 1000

  • October 8, 2021
  • 1 reply
  • 310 views

hello people

I'm trying to get my slider to change values ​​non-linearly like photoshop's Gausian blur slider


The slider goes from 0 to 50 to half and after half from 50 to 1000


Does anyone know how to do this?

 

My Code: 

 

var dialog = new Window("dialog");
dialog.text = "EXAMPLE";
dialog.orientation = "column";
dialog.alignChildren = ["left","top"];
dialog.spacing = 10;
dialog.margins = 10;


var panel1 = dialog.add("panel", undefined, undefined, {name: "panel1"});
panel1.text = "EXAMPLE";
panel1.orientation = "column";
panel1.alignChildren = ["fill","top"];
panel1.spacing = 0;
panel1.margins = 0;

var panel2 = panel1.add("panel", undefined, undefined, {name: "panel2", borderStyle: "one"});
panel2.orientation = "row";
panel2.alignChildren = ["left","top"];
panel2.spacing = 10;
panel2.margins = 10;

var slider = panel2.add("slider", undefined, undefined, undefined, undefined, {name: "slider"});
slider.minvalue = 0.1;
slider.maxvalue = 1000;
slider.value = 20;
slider.preferredSize.width = 268;

var edittext1 = panel2.add('edittext {properties: {name: "edittext1"}}');
edittext1.text = "20";


slider.onChanging = function () {

edittext1.text = slider.value;
}

var statictext1 = panel2.add("statictext", undefined, undefined, {name: "statictext1"});
statictext1.text = " px";

dialog.show();

 

 

Example: adeb2780-c296-4bf3-a93e-27cd6dbffd1e.mp4

This topic has been closed for replies.
Correct answer r-bin

Not exactly like the Gaussian Blur, but close to what you ordered.

The center and end values can be changed as desired.

 

var m1 = 50;   // center value
var m2 = 1000; // max value
var exp = Math.log(m2/m1)/Math.log(2); 


var dialog = new Window("dialog");
dialog.text = "EXAMPLE";
dialog.orientation = "column";
dialog.alignChildren = ["left","top"];
dialog.spacing = 10;
dialog.margins = 10;


var panel1 = dialog.add("panel", undefined, undefined, {name: "panel1"});
panel1.text = "EXAMPLE";
panel1.orientation = "column";
panel1.alignChildren = ["fill","top"];
panel1.spacing = 0;
panel1.margins = 0;

var panel2 = panel1.add("panel", undefined, undefined, {name: "panel2", borderStyle: "one"});
panel2.orientation = "row";
panel2.alignChildren = ["left","top"];
panel2.spacing = 10;
panel2.margins = 10;

var slider = panel2.add("slider", undefined, undefined, undefined, undefined, {name: "slider"});
slider.minvalue = 0;
slider.maxvalue = Math.pow(m2, 1/exp);
slider.value = 0;
slider.preferredSize.width = 268;

var edittext1 = panel2.add('edittext {properties: {name: "edittext1"}}');
edittext1.text = slider.value;
edittext1.preferredSize.width = 50;

slider.onChanging = function () {

var x = Math.pow(slider.value, exp);

if (x > 10) x = Math.round(x);
else if (x > 1) x = Math.round(10*x)/10;
else if (x > 0.1) x = Math.round(100*x)/100;
else  x = Math.round(1000*x)/1000;

edittext1.text = x;
}

var statictext1 = panel2.add("statictext", undefined, undefined, {name: "statictext1"});
statictext1.text = " px";

dialog.show();

 

P.S. I'm not sure if the values in the other points of the slider will suit you. : )

1 reply

r-binCorrect answer
Legend
October 9, 2021

Not exactly like the Gaussian Blur, but close to what you ordered.

The center and end values can be changed as desired.

 

var m1 = 50;   // center value
var m2 = 1000; // max value
var exp = Math.log(m2/m1)/Math.log(2); 


var dialog = new Window("dialog");
dialog.text = "EXAMPLE";
dialog.orientation = "column";
dialog.alignChildren = ["left","top"];
dialog.spacing = 10;
dialog.margins = 10;


var panel1 = dialog.add("panel", undefined, undefined, {name: "panel1"});
panel1.text = "EXAMPLE";
panel1.orientation = "column";
panel1.alignChildren = ["fill","top"];
panel1.spacing = 0;
panel1.margins = 0;

var panel2 = panel1.add("panel", undefined, undefined, {name: "panel2", borderStyle: "one"});
panel2.orientation = "row";
panel2.alignChildren = ["left","top"];
panel2.spacing = 10;
panel2.margins = 10;

var slider = panel2.add("slider", undefined, undefined, undefined, undefined, {name: "slider"});
slider.minvalue = 0;
slider.maxvalue = Math.pow(m2, 1/exp);
slider.value = 0;
slider.preferredSize.width = 268;

var edittext1 = panel2.add('edittext {properties: {name: "edittext1"}}');
edittext1.text = slider.value;
edittext1.preferredSize.width = 50;

slider.onChanging = function () {

var x = Math.pow(slider.value, exp);

if (x > 10) x = Math.round(x);
else if (x > 1) x = Math.round(10*x)/10;
else if (x > 0.1) x = Math.round(100*x)/100;
else  x = Math.round(1000*x)/1000;

edittext1.text = x;
}

var statictext1 = panel2.add("statictext", undefined, undefined, {name: "statictext1"});
statictext1.text = " px";

dialog.show();

 

P.S. I'm not sure if the values in the other points of the slider will suit you. : )

killerQueen
Participant
October 13, 2021

Dude I love you! Thank you very much!