Vaadin 14 paper-slider pin property

I am still new in Vaadin and I am trying to implement @polymenr/paper-slider component using Vaadin 14.

I have downloaded the project https://github.com/berndhopp/vaadin-paper-sliders from Github and I am trying to set "pin" property as explained here

https://vaadin.com/forum/thread/18215247/vaadin-14-slider

In PaperSlider.java

     ...
    public void setPin(boolean pin) {
            this.getElement().setProperty("pin", pin);
        }
    ...

In DemoView.java

    package org.vaadin.addon.sliders.ui;

//import org.vaadin.addon.sliders.PaperSlider;

import org.vaadin.addon.sliders.PaperSlider;

import com.vaadin.flow.component.html.Anchor;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("")
public class DemoView extends VerticalLayout
{
    private PaperSlider slider = null;
    private Label sliderValue = null;

    public DemoView()
    {
        Anchor sourceLink = new Anchor("https://github.com/markhm/vaadin-paper-sliders", " (source code on GitHub)");
        sourceLink.setTarget("_blank");

        HorizontalLayout titleBox = new HorizontalLayout();
        titleBox.setAlignItems(Alignment.BASELINE);
        H3 title = new H3("Vaadin paper-slider, ported to Vaadin v14");
        titleBox.add(title, sourceLink);
        add(titleBox);

        //
        // https://stackoverflow.com/questions/68531460/vaadin-14-paper-slider-pin-property
        //
        HorizontalLayout sliderLine = new HorizontalLayout();
        sliderLine.setHeight("100px");
        Label sliderValue = new Label();
        PaperSlider paperSlider = new PaperSlider(0,100,20);
        paperSlider.addValueChangeListener(e -> sliderValue.setText("New Slider value: " + e.getValue()));
        paperSlider.setPin(true);
        sliderLine.add(paperSlider, sliderValue);
        add(sliderLine);   
        
        // slider.getElement().getStyle().set("padding-top", "30px") ;
              
        //Label whiteline = new Label("");
        //whiteline.setHeight("50px");
        //add(whiteline);
        
        // Testing pin property
        // HorizontalLayout mySliderLine = new HorizontalLayout();
        //sliderValue = new Label("mySlider value");
        //PaperSlider paperSlider = new PaperSlider(0,100,20);
        //paperSlider.getElement().getStyle().set("padding-top", "30px");
        //mySliderLine.setHeight("100px");
        //paperSlider.setPin(true);
        //mySliderLine.add(paperSlider);
        
        // slider.setPin(true) ;
        // add(slider) ;

        // NB: The PaperRangeSlider does not support Polymer 3.

//        HorizontalLayout rangeSliderLine = new HorizontalLayout();
//
//        Label rangeValues = new Label("Range values");
//        rangeSlider = new PaperRangeSlider(0, 100, 40, 60);
//        rangeSlider.addValueChangeListener(e -> rangeValues.setText("Range values: " + e.getValue()));
//        rangeSliderLine.add(rangeSlider, rangeValues);
//        add(rangeSliderLine);
    }
}

I can see the paper slider but I don't see the numeric value label when the slider thumb is pressed.

Can anyone help with this please

Thanks Alex