Adding a slider (for wind altitude) in API v4 -- how to make it appear??

jalbert

I've added the following to the css code (just below the #windy section):

      .height-control {
                    width: 100px;
      }

      .height-control .ui-slider-handle {
                    font-size: 12px;
                    width: 50px;
            }

and the following to the javascript (within windyInit):

    const { map, store, picker, utils, overlays, broadcast } = windyAPI;

// var { map, store, picker, utils, overlays, broadcast } = windyAPI;
// var { map } = windyAPI
// .map is instance of Leaflet map

    const levels = store.getAllowed('availLevels');
      //create a custom control element for height
    var HeightSlider = L.Control.extend({
            options: {
                    position: 'topleft'
            },

            onAdd: function (map) {
                    // create the control container with a particular class name
                    var container = L.DomUtil.create('div', 'height-control');

                    // var valMap = ['surface', '100m','975h','950h','925h','900h','850h','800h', '700h','600h','500h','400h','300h', '250h', '200h', '150h' ];
                    var realHeight = ['surface', '100m','300m','600m','750m','900m','1.5km','2.0km','3.0km','4.2km','5.5km','7.0km','9.0km','10km','11.7km','13.5km'];
                    setTimeout(function () {

                            $(".height-control").slider({
                                    max: levels.length - 1,
                                    orientation: "vertical",
                                    slide: function(event, ui){
                                       // W.setLevel(valMap[ui.value])
                                       store.set('level', levels[ ui.value ]);
                                       $('.height-control').find(".ui-slider-handle").text(realHeight[ui.value]);
                                    }
                            });
                            $('.height-control').find(".ui-slider-handle").text(realHeight[0]);
                    }, 1000);
                    return container;
            }
    });

    //add the slider control element to the page
    //if(!($(".height-control").length)) {
            map.addControl( new HeightSlider() );
    //      window.setTimeout(addSliderTitle, 5000);
    // }

but a slider never appears on the windy page, and I am unable to make one appear.
What could I possibly be doing wrong?? (The equivalent code worked in APIv2.3.)

Thanks,
justin

jalbert

Now I see (I don't know how I missed it) that there is an altitude slider at the very bottom of the selection panel that one gets if one opens the overlay selection (i.e., clicking on "Wind") in the upper right -- so I suppose I can just avoid adding this slider to the main window.

(It might still be nice to know why the above doesn't work, and if there is any way to create and open a slider on the main window. Note that Javascript console information doesn't seem to help for that -- there were no related error messages there.)