Sliders with non-linear behavior.

[veillette]

What is a good pattern to create sliders with non-linear behavior, i,e, where the property of the slider doesn't map linearly to the needed property for the model.

Here is the example in Pendulum-lab.

Notice how sliderProperty updates the frictionProperty which itself updates the sliderProperty. The slider works by the way.

   var hSlider = new HSlider( sliderValueProperty, sliderValueRange);

   // slider link to friction value
    sliderValueProperty.link( function( sliderValue ) {
      // snap to integer values
      if ( sliderValue % 1 === 0 ) {
        frictionProperty.value = sliderValueToFriction( sliderValue );
      }
      else {
        sliderValueProperty.value = Util.roundSymmetric( sliderValue );
      }
    } );

    frictionProperty.lazyLink( function( frictionValue ) {
      sliderValueProperty.value = Util.roundSymmetric( frictionToSliderValue( frictionValue ) );
    } );

  function sliderValueToFriction( sliderValue ) {
    return 0.0005 * ( Math.pow( 2, sliderValue ) - 1 );
  }
  function frictionToSliderValue( friction ) {
    return Util.roundSymmetric( Math.log( friction / 0.0005 + 1 ) / Math.LN2 );
  }

[pixelzoom]

HSlider currently uses LinearFunction internally to map slider positions to model values. A more general approach would be to pass a mapping function in via options, with LinearFunction being the default.

[jonathanolson]

I'll look into adding a value mapping function with HSlider.

[jonathanolson]

Handled with DynamicProperty's ability to apply a map/inverseMap between it and its source Property.