Hello @BobCowling2, the Calcite Slider component is aimed more for numeric adjustable values. To showcase years there's a bit of customization needed.
On load you could set a Calcite Label to the initial slider value, and add an event listener to update the value as the user interacts with the component using the calciteSliderChange event.
For instance, an example with the range of 1900-2000 and 1970 selected on initialization:
<style>
calcite-slider {
width: 50vw;
margin: auto;
padding: 10px;
}
#sliderLabel {
font-weight: bold;
}
</style>
<calcite-label alignment="center" for="slider" id="sliderLabel">1970</calcite-label>
<calcite-slider id="slider" min="1900" max="2000" value="1970" step="1"></calcite-slider>
<script>
window.addEventListener("calciteSliderChange", (result) => {
const sliderVal = document.getElementById("slider").value;
// Removes "," character from the number
document.getElementById("sliderLabel").innerHTML = sliderVal.toString().replace(/,/g, "");
});
</script>