Change slider handle image

Hello,

I’ve been trying to change the image used for slider handles but have been unsuccessful thus far.

I have a 32 x 32 .png image i want to use. It’s located in WebContent/META-INF/VAADIN/themes/gw2/img/waypoint.png

Initialization like so:

Slider reqLvl = new Slider("Required Discipline Level",0,500); reqLvl.setOrientation(SliderOrientation.HORIZONTAL); reqLvl.setWidth("190px"); reqLvl.setImmediate(true); scss:

.v-slider-handle { background: transparent url(img/waypoint.png); width: 32px; height: 32px; } I am using Vaadin 7, Valo and Chrome with caching disabled.

-Markus

You can check the slider’s scss in the vaadin theme jar. You can then override it in your theme. You can also try using !important i your scss.

Hey Markus,

Take a look at .v-slider-handle:before and .v-slider-handle:after. That’s where the background-color etc are set.

Thank you both for your replies! I was able to make it work using Joacim’s suggestion, here’s my current scss:

[code]
.v-slider {
}

.v-slider-base {
    background: transparent url("img/sliderGreen.png") repeat-x;
}
    
.v-slider-handle:before, .v-slider-handle:after {
    background: transparent url(img/waypoint.png);
    width: 32px;
    height: 32px;
    margin-top: -1px;
    border-style: none;
}

[/code]however there are still a few problems.

  1. The white border around the handle (see attachment), how do I get rid of it? This is not the first time I’m seeing this border either, the same issue appears on the combobox (see attachment).
  2. How do I remove the blue border from an active handle (see attachment)?

19703.jpg

That looks like a GW2 waypoint. :smiley:

Markus, try setting the box-shadow to none. That should remove the white border that you see.

Thank you Joacim, setting box-shadow: none; did indeed fix the problem. My final scss is as follows and will give you the results in the attached image:

    .v-slider-base {
        background: transparent url("img/sliderGreen.png") repeat-x;
        height: 20px;
    }
        
    .v-slider-handle:before, .v-slider-handle:after {
        background: transparent url(img/waypoint.png);
        width: 32px;
        height: 32px;
        //margin-top: -1px;
        border-style: none;
        box-shadow: none;
    }

For anyone else who is also getting frustrated over white borders around other components, I found out there are global variables in Valo. Setting $v-bevel: none;

[code]
$v-bevel: none;

@import “…/valo/valo.scss”;
@mixin gw2 {
@include valo;

// Insert your own theme rules here


[/code]also solved my problem (including the combobox). You can read more about global variables in Valo here:

http://vaadin.com/wiki/-/wiki/Main/Valo+theme±+Getting+started

19906.png