Slider CSS skinning

[David Grieve]

Here is one way that uses a linear-gradient style where the stop offsets  are defined by the slider value

public void startx(Stage stage)
        VBox vbox = new VBox(4);
        final Slider slider = new Slider();
        SliderSkin skin = new SliderSkin(slider);
        slider.setSkin(skin);
        
        final Node track = slider.lookup(".track");
        if (track != null) {
            slider.valueProperty().addListener((observable,oldValue,newValue)-> {
                track.setStyle("-fx-background-color: linear-gradient(to right, red " + newValue.intValue() + "%, green " + newValue.intValue()+ "%);");
                System.out.println(track.getStyle());
            });
        }
        vbox.getChildren().add(slider);
        Scene scene = new  Scene(vbox, 300, 100);
        stage.setScene(scene);
        stage.show();
}

On Nov 27, 2013, at 5:22 PM, Pedro Duque Vieira <pedro.duquevieira at gmail.com> wrote:

> Hi,
> 
> Is it possible to style the slider color from the start until the position
> of the thumb only?
> 
> I'm trying to skin the slider to look like one from windows 8:
> http://1.bp.blogspot.com/-29UFZrwHiAY/UL8vviDkh_I/AAAAAAAAAl0/Bm4KmR1XijA/s1600/slider.png
> 
>> From what I've seen of the code this does not seem possible.
> I think this should be possible as there are several operating systems
> whose sliders show a color between the start and the the thumb position.
> 
> Thanks, regards,
> 
> -- 
> Pedro Duque Vieira