Смена радиокнопок на ползунок переключателя

Question

Добрый день, я привел пример, где вы можете изменить тему сайта с помощью радиокнопок, теперь мне интересно, можно ли изменить вход с радиокнопок на ползунок переключателя? Делая это для темы переключения режима свет / темнота любое предложение или объяснение, как я могу это сделать, потому что я не очень знакомые элементы DOM. Полный пример кода ниже.

const URL_SCHEMA = 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/stock-chart-with-volume_schema.json';

const jsonify = res => res.json();
const dataFetch = fetch(URL_DATA).then(jsonify);
const schemaFetch = fetch(URL_SCHEMA).then(jsonify);

Promise.all([
  dataFetch,
  schemaFetch
]).then(([
  data,
  schema
]) => {
  var fusionTable = new FusionCharts.DataStore().createDataTable(data,
    schema);

  new FusionCharts({
    type: 'timeseries',
    renderAt: 'container',
    width: '100%',
    height: 550,
    dataSource: {
    caption: { 
      text: "Apple Inc. Stock Price"
    },
    subcaption: {
      text: "Stock prices from May 2014 - November 2018"
    },
    chart: {
      exportenabled: 1,
      multicanvas: true,
      theme: "fusion"
    },
    data: fusionTable,
    yaxis: [ 
      {
        plot: [
          {
            value: {
              open: "Open",
              high: "High",
              low: "Low",
              close: "Close"
            },
            type: "candlestick"
          }
        ],
        format: {
          prefix: "$"
        },
        title: "Stock Price"
      },
      { 
        plot: [
          {
            value: "Volume",
            color: "#228B22",
            type: "column"
      }
        ],
       // max: "900000000"
      }
    ],
    navigator: {
      enabled: 0
    }
  },
  events: {
    beforeRender: function(e, d) {
      var container = e.data.container;
      // Change the sizes according to your need
      var options = {
        fusion: "Light",
        candy: "Dark",
      };
      var themeSelected = "fusion";

      function instantiate() {
        // Create option containers
        var parent = container.parentNode;

        var optionsContainer = document.createElement("div");
         optionsContainer.id = "config-container";

        var spanLabel = document.createElement("span");
        spanLabel.id = "select-text";
        spanLabel.innerText = "Choose a theme: ";

        var radioContainer = document.createElement("div");
        addClass(radioContainer, "change-type");
        window.__onThemeChange = function(option) {
          e.sender.setChartAttribute("theme", option);
        };

        // Util to add class
        function addClass(element, className) {
          var element,
            name = className,
            arr;
          arr = element.className.split(" ");
          if (arr.indexOf(name) == -1) {
            element.className += " " + name;
          }
        }

        function radioWrapper(
          wrapperId,
          inputId,
          label,
          selected,
          optionLabel
        ) {
          var item = "<div id='" + wrapperId + "' >";
          item +=
            "<input name='dimesion-selector' id='" +
            inputId +
            "' type='radio' " +
            (selected ? "checked='checked'" : "") +
            " onchange='__onThemeChange(\"" +
            optionLabel +
            "\")'/>";
          item += "<label for='" + inputId + "' >" + label + "</label>";
          item += "</div>";
          return item;
        }
        var changeTypeChilds = "";

        Object.keys(options).forEach(function(option, index) {
          var label = options[option];
          var selected = themeSelected === option;
          var radioOption = radioWrapper(
            "radio" + (index + 1),
            "radioButton" + (index + 1),
            label.toUpperCase(),
            selected,
            option
          );
          changeTypeChilds += radioOption;
        });

        radioContainer.innerHTML = changeTypeChilds;

        optionsContainer.appendChild(spanLabel);
        optionsContainer.appendChild(radioContainer);

        parent.appendChild(optionsContainer);

        var css =
        '.change-type{display:inline-block;margin:0 10px;font-family:basefontRegular,Helvetica Neue,Arial,sans-serif}.change-type>div{display:inline-flex;position:relative;margin:0 10px}.change-type label{position:relative;padding:5px 4px 5px 30px;border-radius:4px}.change-type input{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;left:0;position:absolute}.change-type label:after,.change-type label:before{content:"";position:absolute}.change-type label:before{display:block;background:#fff;border:2px solid #949697;box-shadow:none;border-radius:50%;top: 15px;left: 9px;width:1rem;height:1rem}.change-type label:after{    width: .55rem;height: .55rem;top: 18px;left: 11px;border-radius: 100%;}.change-type input:checked~label{color:#48b884;font-weight:600;box-shadow:0 4px 9px 0 rgba(104,105,128,.22)}.change-type input:checked~label:before{color:#fff;box-shadow:none;border:2px solid #48b884}.change-type input:checked~label:after{background:#55bd8d}';

        var styleNode = document.createElement("style");
        styleNode.innerHTML = css;
        document.body.appendChild(styleNode);
      }
      if (!window.__sample_theme_change) {
        instantiate();
      }
      window.__sample_theme_change = true;
    }
  }

}).render();
});