Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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:
.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;
}
however there are still a few problems.
- 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).
- How do I remove the blue border from an active handle (see attachment)?
That looks like a GW2 waypoint. :D
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;
$v-bevel: none;
@import "../valo/valo.scss";
@mixin gw2 {
@include valo;
// Insert your own theme rules here
...
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