linked sliders

[Cyrille Piatecki]

I want to have to sliders defined on the same interval but se second must always be greater than the first. I have tried something like

var sl0 = board2.create('slider', [[0, 1], [2, 1], [0.00001, .5, 0.99999]],{

baseline: { strokeColor: 'blue'},

highline: { strokeColor: 'red'},

fillColor: '#0061a8',

strokeColor: '#0061a8',

label: {fontSize: 14, strokeColor: 'Black'},

name: '$\\alpha$', // Not shown, if suffixLabel is set

suffixLabel: '$\\,\\,\\, p_h = \\, $',

//postLabel: ' u'

});

//var sl00 = board2.create('slider', [[0, 0.75], [2, 0.75], [0.00001, function(){return sl0.Value();},.5, 0.99999]],{

  var sl00 = board2.create('slider', [[0, 0.75], [2, 0.75], [function(){return sl0.Value();}, .5, 0.99999]],{

baseline: { strokeColor: 'blue'},

highline: { strokeColor: 'red'},

fillColor: '#0061a8',

strokeColor: '#0061a8',

label: {fontSize: 14, strokeColor: 'Black'},

name: '$\\alpha$', // Not shown, if suffixLabel is set

suffixLabel: '$\\,\\,\\, p_b = \\, $',

//postLabel: ' u'

});

but the second is not displayed correctly

[Alfred Wassermann]

Dear Cyrille,

for the lower and upper bounds of the slider values, functions are not supported. 

Here are two variants. The first variant changes the lower bound - which I find a bit less intuitive. But of course this depends on the context:

s1.on('drag', function(e) {
    s2.setMin(this.Value());
});
s2.on('drag', function(e) {
    if (this.Value() < s1.Value()) {
        this.setValue(s1.Value());
    }
});

The second variant changes the value of the second slider:

s1.on('drag', function(e) {
    if (this.Value() > s2.Value()) {
        s2.setValue(this.Value());
    }
});
s2.on('drag', function(e) {
    if (this.Value() < s1.Value()) {
        this.setValue(s1.Value());
    }
});

See it live at https://jsfiddle.net/6Ly4ckz9/1/

Best wishes,

Alfred

[Murray]

Cyrille and Alfred

The first variation didn't work for me at first, then I commented out the "moveOnUp: false" on slider 2, and it sort-of worked, but not reliably.

In this fork, I've added a Variant 3, which moves both sliders such that the second is always greater than or equal to the first.

https://jsfiddle.net/mbourne/4b8xzL1m/

Regards

Murray

[Tom Berend]

Dear Murray, Alfred, & Cyrille,

It would be better to build a 'double' slider with two glide points on a single line, to express the relationship that Cyrille is proposing. 

Sliders are the workhorses of JSXGraph interaction and are perhaps overused.  We should ask whether there are other patterns that JSXGraph should offer.  A 'double slider' sounds like a nice one.  If the glide points are locked as Cyrille suggests, they might represent initial and final values or part-vs-whole values.  

I can imagine a version of Slider with two triangle gliders - one facing up and one facing down, one equal or behind the other but visually unable to pass.   Or for even more expressive power, something that looks like a slide rule with a fixed slider, a movable slider, and even a sliding bezel.

We don't have to build every widget into JSXGraph, but we should have a library of well-written tools.  This would be a fine one to start with.

--
You received this message because you are subscribed to the Google Groups "JSXGraph" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsxgraph+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/jsxgraph/94792e66-ddd6-46d9-85a6-73e788c1936cn%40googlegroups.com.