使用范围滑块输出二维数组的结果

Question

我正在创建一个网站，允许用户根据特定条件（难度、长度）搜索远足径。我用路径名称、难度和长度制作了一个二维数组。

我想在按长度搜索时使用范围滑块，但我无法让它从二维数组中输出路径名称。我已经有了按难度选择的单选按钮，它在 HTML 中，但已从脚本中删除。

这是我的 HTML：

let hikes = [
    ['Easy','Silver Mine Head Path', 3.8],
    ['Hard','White Horse Path', 18.2],
    ['Easy','Father Troy', 8.9],
    ['Hard','Spout Path', 16.2]
];
    console.log(hikes)

//Allows console.log to display what radio button was selected.
let chosen;

document.getElementById('easy').onclick = function () {
    console.log("Easy")
    chosen = "Easy";
}
document.getElementById('hard').onclick = function () {
    console.log("Hard")
    chosen = "Hard";
}

//Slider

let slider = document.getElementById("sliderRange");
let length = document.getElementById("demo");
let trailName = document.getElementById("output");

length.innerHTML = slider.value;

slider.oninput = function displayArray() {

  let results = [];

  length.innerHTML = this.value; // Displays slider value
  
  let selectedTrails = hikes.filter(function(hikes) {

    return hikes[2] == slider.value;

  });

    if(selectedTrails.length > 0) {

        let trailNames = selectedTrails.map(function(hikes) {
        return hikes[1];

        });

        document.getElementById("output").innerHTML = "Trail name: " + trailNames.join(", ");
    } 
    
    else {
        document.getElementById("output").innerHTML = "No trail with the selected length found.";
    }   
    
} 

 <div id="container"></div>

        <h1>HIKE NEWFOUNDLAND!</h1>
        
            <div id="image-main">
                <img src="img/grosmorne.jpeg" width="640" height="369" alt="Gros Morne"/>
            </div>
                
            <form>
                <fieldset>
                    <h2>Select Difficulty:</h2>

                    <input type="radio" id="easy" name="difficulty" value="Easy"> Easy
                    <br>
                    <input type="radio" id="hard" name="difficulty" value="Hard"> Hard
                    <br>
                    <h3>Select Desired Length</h3>

                        <div class="rangeslider">
                        <input type="range" min="1" max="25" value="1" class="slider" id="sliderRange" oninput="filter(this)">
                        <p> <span id="demo"></span> km</p>
                        </div>

                        <div id="button">
                            <button type="button" onclick="displayArray()">Find a Hike!</button>
                        </div>

                </fieldset>
            </form>

              
    </div>

    <div id="result">
        <p id="output"></p>
    </div>