如何根据oninput range滑块的变化调整非功能性Javascript小部件中的属性？

Question

我已经尝试了几个小时才能使用此TradingView JavaScript小部件来根据用户滑动HTML范围滑块来调整高度和宽度属性。 但是我能做的最好的办法就是根据页面加载时范围滑块的最小值和最大值的平均值来显示高度和宽度。

即我无法使其响应滑块位置的变化。 我已经尝试了getAttribute，document.getElementById等几乎所有可能的组合。

我已经搜索了StackOverflow上的所有类似情况，但都没有完全满足此代码的要求。

---

的HTML

<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>

---

JS

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"
}
  );

---

请帮忙！ 我无法包含从滑块中调用oninput / onchange值的函数，因为在函数中定义的任何var都无法在窗口小部件中全局使用，并且如果我尝试在窗口小部件中剪切和粘贴，它将无法正常工作无论如何，这样的功能。 有什么想法吗？ （如果您想查看小部件在没有滑块的情况下如何正常呈现，则只需将宽度和高度线替换为300而不是脚本即可。

这是应该呈现的内容：

Answer 1

演示： https : //jsfiddle.net/qhzjfen5/

html

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

的CSS

.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;
}

js

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

Answer 2

您需要给它一个初始值，然后在sliderChange函数上，获取小部件，更新选项，然后重新渲染它。 我不知道他们的API是什么样的，所以他们可能是一种更好的方法，但这应该可行：

 slider = document.getElementById('slider'); var widget = new TradingView.widget( { "width": 300, "height": 300, "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" } ); function sliderChange(e) { widget.options.width = e.target.value; widget.options.height = e.target.value; widget.create(); } 

 <input id="slider" type="range" oninput="sliderChange(event)" 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>