如何在滑块旋转上添加下拉菜单？

<input type="range" id="slider">
<select id="dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

const slider = document.getElementById('slider');
const dropdown = document.getElementById('dropdown');

slider.addEventListener('input', function() {
  const value = slider.value;
  
  // 根据滑块的值来动态改变下拉菜单的选项
  if (value < 50) {
    dropdown.innerHTML = `
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    `;
  } else {
    dropdown.innerHTML = `
      <option value="option3">Option 3</option>
      <option value="option4">Option 4</option>
    `;
  }
});

dropdown.addEventListener('change', function() {
  const selectedOption = dropdown.value;
  
  // 执行相应的操作
  console.log('Selected option:', selectedOption);
});