Form Slider + Switcher header small text goes here...

Switchery

You can use the predefined javascript variable in /assets/js/theme/ folder to create different color theme switchery.

<!-- required files -->
<link href="../assets/plugins/switchery/dist/switchery.min.css" rel="stylesheet" />
<script src="../assets/plugins/switchery/dist/switchery.min.js"></script>

<!-- html -->
<input type="checkbox" id="switchery-default" checked />

<!-- script -->
<script>
  var elm = document.getElementById('switchery-default');
  var switchery = new Switchery(elm, {
    color: '#00acac'
  });
</script>

Switchery State

checked
unchecked
checked
unchecked
<!-- change state via javascript -->
<script>
var elm = document.getElementById('id-here');
var switchery = new Switchery(elm);

switchery.enable();  // enable
switchery.disable(); // disable
switchery.destroy(); // destroy
</script>

Powerange Slider

You can use the predefined javascript variable in /assets/js/theme/ folder to create different color theme switchery. You may add the hideRange option and set the value as true during the slider init in order to remove the range number from the slider.

Check Value
<!-- required files -->
<link href="../assets/plugins/abpetkov-powerange/dist/powerange.min.css" rel="stylesheet" />
<script src="../assets/plugins/abpetkov-powerange/dist/powerange.min.js"></script>

<!-- html -->
<div class="powerange-wrapper">
  <input type="text" id="powerange-default" />
</div>

<!-- script -->
<script>
  var elm = document.getElementById('powerange-default');
  var powerange = new Powerange(this, {
    disable: false,
    disableOpacity: 0.5,
    decimal: false,
    hideRange: false,
    klass: '',
    min: 0,
    max: 100,
    start: 70,
    step: null,
    vertical: false
  });

  elm.value;  // get value
</script>
App Settings
Header Fixed
Sidebar Fixed
Sidebar Grid
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage