在p5.js绘图应用中，如何将切换轴的按钮替换为滑块？

问题背景 #

我正在开发一款绘图应用，目前遇到实现难题。现有HTML结构如下：

<div class="box colourPalette"></div>
  <div class="box options">
    <div class=" buttonOne"></div>
    <div class=" buttonTwo"></div>
  </div>

我通过以下代码为buttonOne填充了一个按钮，实现对称轴切换功能：

this.populateOptions = function() {
    select(".buttonOne").html(
        "<button id='directionButton'>Make Horizontal</button>");
    // click handler
    select("#directionButton").mouseClicked(function() {
        var button = select("#" + this.elt.id);
        if (self.axis == "x") {
            self.axis = "y";
            self.lineOfSymmetry = height / 2;
            button.html('Make Vertical');
        } else {
            self.axis = "x";
            self.lineOfSymmetry = width / 2;
            button.html('Make Horizontal');
        }
    });
};

请问如何将该按钮替换为slider来实现相关功能？

实现方案 #

直接用HTML5的<input type="range">滑块控件替换按钮，通过滑块的二元取值来切换对称轴模式，同时同步更新状态显示和对称轴位置，具体实现如下：

1. 重写populateOptions函数渲染滑块 #

把原来的按钮替换为滑块和状态标签，绑定滑块的输入事件：

this.populateOptions = function() {
    // 渲染滑块容器、状态标签和滑块
    select(".buttonOne").html(`
        <div class="slider-wrap">
            <span id="axisStatus">水平对称轴</span>
            <input type="range" id="axisSlider" min="0" max="1" step="1" value="${self.axis === 'x' ? 0 : 1}">
        </div>
    `);

    // 监听滑块变化事件
    select("#axisSlider").input(function() {
        const sliderVal = parseInt(this.elt.value);
        const statusLabel = select("#axisStatus");

        if (sliderVal === 0) {
            self.axis = "x";
            self.lineOfSymmetry = width / 2;
            statusLabel.html("水平对称轴");
        } else {
            self.axis = "y";
            self.lineOfSymmetry = height / 2;
            statusLabel.html("垂直对称轴");
        }
    });
};

2. 可选：添加基础样式优化显示 #

给滑块容器加简单样式，提升交互体验：

.slider-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    align-items: center;
}

#axisSlider {
    width: 120px;
}

实现说明 #

• 滑块设置min=0、max=1、step=1，确保只有两个可选值，分别对应水平（X轴）和垂直（Y轴）模式
• 初始化时根据self.axis的默认值设置滑块初始位置和状态标签内容
• 通过input事件实时响应滑块切换，同步更新对称轴参数和状态提示

内容的提问来源于stack exchange，提问作者Ryan Vassallo