How can I get the slider to work and filter on rent property of features in vega-lite? - vega-lite

Question

This is how my current map looks like.
const selectslider = vl.param("maxrentalcost")
.value(400)
.bind(vl.slider(400, 1700, 50).name("Max Rental Cost"));
const buildings = vl
.markGeoshape()
.data({
values: somedata6,
format: {
type: "json",
property: "features"
}
})
.project(vl.projection("identity").reflectY(true))
.encode(
vl.fill({
value: "#ffffff"
}),
vl.stroke({
value: "black"
})
);
const apartments = vl
.markGeoshape()
.data({
values: somedata6,
format: {
type: "json",
property: "features"
}
})
.params(selectslider)
.transform(
vl.filter('maxrentalcost > datum.properties.rentalcost')
)
.project(vl.projection("identity").reflectY(true))
.encode(
vl.stroke({
value: "black"
}),
vl.fill({
field: "properties.rent",
type: "quantitative",
title: "Average Building Rent",
scale: { scheme: "reds", domainMax: 1200 }
})
);
return vl.layer(buildings, apartments).width(850).height(850).render();
I can't get the slider to work to show only the polygons(apartments) with rent property less than the slider value.
The geoshape has two layers. The bottom layer draws all the buildings. The top layer only draws buildings with nonnull rent property.
I would appreciate any help.
Sample data: