Javascript 获取滑块以显示月份而不是数字

我正在尝试使用

html

滑块来输出月份。我制作了一个最大值为12的滑块，从1开始

我的

html

而不是RangeSloider的数字代码是：

<label id="labelslider" for="slider">Bepaal de forecast periode:</label> <!-- Range -->
<input type="range" id="slider" min="1" max="12" value="1" step="1" oninput="outputUpdate(value)" />
<output for="slider" id="range">0</output>

---

我试图合并开关功能以减少月数，但无法使其正常工作。

有很多错误

您应该具有运算符的RHS中的值

您应该使用

#滑块的值进行切换

您不需要向函数传递任何值

工作片段

函数outputUpdate（）{
var vol=“”；
开关（document.querySelector（“#slider”）.value）{
案例“1”：
vol=“一月”；
打破
案例“2”：
vol=“Februari”；
打破
案例“3”：
vol=“Maart”；
打破
}
document.querySelector（“#range”）.innerHTML=vol；
}

Bepaal de预测周期：
0

有很多错误

您应该具有运算符的RHS中的值

您应该使用

#滑块的值进行切换

您不需要向函数传递任何值

工作片段

函数outputUpdate（）{
var vol=“”；
开关（document.querySelector（“#slider”）.value）{
案例“1”：
vol=“一月”；
打破
案例“2”：
vol=“Februari”；
打破
案例“3”：
vol=“Maart”；
打破
}
document.querySelector（“#range”）.innerHTML=vol；
}

Bepaal de预测周期：
0

运算符RHS中的值

：我不清楚，那是什么？@GG。啊。。。右手边！谷歌duh！：谢谢！也可以将月份放在中间的滑块下吗？@CostCare是的，只需使用

显示：内联块

并给

文本对齐：中心

@CostCare

#滑块#范围{显示：块；宽度：200px；文本对齐：中心}

-这就是您需要在CSS中放置的内容<代码>：）享受。

操作员右侧的值

：我不清楚，那是什么？@GG。啊。。。右手边！谷歌duh！：谢谢！也可以将月份放在中间的滑块下吗？@CostCare是的，只需使用

显示：内联块

并给

文本对齐：中心

@CostCare

#滑块#范围{显示：块；宽度：200px；文本对齐：中心}

-这就是您需要在CSS中放置的内容<代码>：）尽情享受。

function outputUpdate(vol) {
    //document.querySelector('#range').value = vol;
    switch(document.querySelector('#range').value) {
        case "1":
            "Januari" = vol;
        break;
        case "2":
            "Februari" = vol;
        break;
        case "3":
            "Maart" = vol;
        break;
    }
}