FX

package photoeffects;

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.image.*;
import javafx.scene.paint.*;
import javafx.scene.layout.*;
import javafx.scene.input.*;

/* This class implements a custom slider control using four images:
 * the min button
 * the max button
 * the background
 * the thumb
 *
 * many values are hard coded in this slider because it is only used in this
 * example. To make this slider reusable the constants would be replaced by
 * public-init variables that could be configured.
 */
public class CustomSlider extends CustomNode {

    public-init var minValue = 0.0;
    public-init var maxValue = 1.0;
    public-init var minButtonImage:Image = Image { url: "{__DIR__}images/bl.png" };
    public-init var maxButtonImage:Image = Image { url: "{__DIR__}images/bh.png" };
    
    var position = 20.0 on replace {
        if(position < 0 ) {
            position = 0;
        }
        if(position > 113-16) {
            position = 113-16;
        }
        value = position / (113.0-16.0) * (maxValue-minValue) + minValue;
    }

    public var value:Number = 0.0;

    override public function create():Node {
        return Group {
            content: [
                ImageView {x:0         image: minButtonImage },
                ImageView {x:12 y:2    image: Image { url: "{__DIR__}images/slider.png" } 
                },
                ImageView {x:12+113    image: maxButtonImage },
                ImageView {x: bind 12+position y: -4 image: Image { url: "{__DIR__}images/thumb.png" } },
                // a draggable area that is slightly bigger than the slider
                // so that it's easier to click on
                Rectangle { fill: Color.TRANSPARENT
                    x: 12 y: -4 width: 113 height: 9+8+5
                    onMousePressed: function(e:MouseEvent) {
                        position = e.x - 20;
                    }
                    onMouseDragged: function(e:MouseEvent) {
                        position = e.x - 20;
                    }
                }
            ]
        }
    }
    
}