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

Question

I've been trying for hours to get this TradingView JavaScript widget to adjust the height and width properties based on the user sliding an HTML range slider. But the best I can do is to get it to display height and width based on the mean average of the min and max values of the range slider upon page-load.

ie I can't get it to respond to changes in the slider position. I've tried just about every conceivable combination of getAttribute, document.getElementById etc.

I've searched through all of the similar cases on StackOverflow and none quite meet the requirements of this code.

---

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

---

Please help! I can't include a function to call the oninput/onchange value from the slider because any var I define in the function is then not available globally in the widget, and it doesn't work if I try to cut and past the widget inside such a function anyway. Thoughts? (If you want to see how the widget renders normally without slider then just replace the width and height lines with 300 instead of the script.

This is what should render:

Answer 1

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

You need to give it an initial value, and then on your sliderChange function, you get the widget, update the options, and then re-render it. I don't know what their API is like, so their may be a better way to do it, but this should work:

 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>