Get started
Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Change slider handle image

Markus Isaksson
6 years ago May 21, 2015 3:41pm

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
 

Emmanuelle Victoria
6 years ago May 22, 2015 1:28am

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.

Joacim Päivärinne
6 years ago May 22, 2015 6:35am

Hey Markus,

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

Markus Isaksson
6 years ago May 24, 2015 3:47pm

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.

  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)? 
Joacim Päivärinne
6 years ago May 28, 2015 11:32am

That looks like a GW2 waypoint. :D

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

Markus Isaksson
6 years ago Jun 02, 2015 4:14pm

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