如何根据oninput范围滑块的更改调整非功能Javascript小部件中的属性？

几个小时以来，我一直在尝试让这个TradingView JavaScript小部件根据用户滑动HTML范围滑块来调整高度和宽度属性。但我能做的最好的事情就是让它根据页面加载时范围滑块的最小值和最大值的平均值来显示高度和宽度

i、 我不能让它对滑块位置的变化做出反应。我尝试了getAttribute、document.getElementById等所有可能的组合

我已经搜索了StackOverflow上的所有类似案例，没有一个完全符合此代码的要求

---

HTML

---

请帮忙！我不能包含一个从滑块调用oninput/onchange值的函数，因为我在函数中定义的任何变量在小部件中都不全局可用，而且如果我尝试在这样的函数中剪切并通过小部件，它也不起作用。思想？（如果您想查看小部件在没有滑块的情况下如何正常渲染，那么只需将宽度和高度线替换为300，而不是脚本

这是应该呈现的内容： 演示：

html js

---

你需要给它一个初始值，然后在你的

sliderChange

函数中，你得到小部件，更新选项，然后重新渲染它。我不知道他们的API是什么样的，所以他们可能是一个更好的方法，但这应该可以工作：

slider=document.getElementById（'slider'）；
var widget=new TradingView.widget(
{
“宽度”：300，
“高度”：300，
“符号”：“COINBASE:BTCUSD”，
“间隔”：“3”，
“时区”：“欧洲/伦敦”，
“主题”：“黑暗”，
“风格”：“9”，
“locale”：“en”，
“工具栏背景”：“#f1f3f6”，
“启用发布”：false，
“允许符号更改”：true，
“研究”：[
"BB@tv-基础研究“，
"StochasticRSI@tv-基础研究”
],
“显示弹出按钮”：真，
“弹出窗口宽度”：“1000”，
“弹出高度”：“650”，
“容器id”：“tradingview_15b05”
}
);
功能滑块切换（e）{
widget.options.width=e.target.value；
widget.options.height=e.target.value；
widget.create（）；
}

感谢Zohaib的快速响应和漂亮的CSS。它似乎与我尝试将JS小部件合并到函数中时遇到的问题相同，即图形根本不呈现（在滑块下方）请看：@PeterHedditch这里是演示。javascript函数在html部分不可访问，所以我在html的脚本标记中定义了它，但在实际场景中，这不会发生。欢迎@PeterHedditchThanks，Dave，这些都是非常有用的编码技巧。非常感谢您的帮助。PeterSorry，还有一件事。如果我想确保Java中的时间刻度Script widget chart拾取用户的本地ISO tz时区，最佳做法是完全删除时区选项行，还是按如下方式添加一些代码：“timezone”：Intl.DateTimeFormat（）.resolvedOptions（）.timezone，

<input id="slider" type="range" oninput="sliderChange(this.value)" min="200" max="400" />

<!-- TradingView Widget BEGIN --></p><div class="" style=""><div 
id="tradingview_15b05">  </div><p><script type="text/javascript" 
src="https://s3.tradingview.com/tv.js"></script>

slider = document.getElementById('slider');

  new TradingView.widget(
  {
  "width": slider.addEventListener('input', sliderChange),
  "height": slider.addEventListener('input', sliderChange),
  "symbol": "COINBASE:BTCUSD",
  "interval": "3",
  "timezone": "Europe/London",
  "theme": "Dark",
  "style": "9",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "studies": [
"BB@tv-basicstudies",
    "StochasticRSI@tv-basicstudies"
  ],
  "show_popup_button": true,
  "popup_width": "1000",
  "popup_height": "650",
  "container_id": "tradingview_15b05"
}
  );

<input class="slider" id="slider" type="range"
     oninput="sliderChange(this.value)" min="200" max="400" />

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;   
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

function sliderChange (value) {
  console.log(value);
   new TradingView.widget({
     "width": Number(value),
     "height": Number(value),
     // other configurations
   }
}