Form Slider + Switcher header small text goes here...
You can use the predefined javascript variable in /src/js/app.js 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>
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>
You can use the predefined javascript variable in /src/js/app.js 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.
<!-- 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>