How to create Multiple Sliders in a single Node

Introduction:

This guide will show you how to create multiple sliders in a single node. Currently Leadshook is only capable of having one slider in a single node. You can use the Custom code below to have multiple sliders.

Note: You will need a developer if you wish to alter the code we provide for this guide

Step-by-Step guide:

Step 1: Create a Custom Page Node or any regular node that has a text editor.

  • When using the text editor method, you will need to click “Source”

Step 2: Create 3 Number type Custom Fields

Step 3: Paste the code provided below on your Custom page node or the text editor.

  • This code will create 3 sliders and assign to their respective custom fields
<style>

.slider-container {
  width: 80%;
  margin: 20px auto;
  padding: 10px;
  border-radius: 10px;
  background: #f5f5f5;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}

.range-slider {
  width: 100%;
}

h3 {
  text-align: center;
  font-family: Arial, sans-serif;
  color: #333;
}

  .button {
  display: inline-block;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #007BFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}
  
</style>


<!-- Include jQuery and Rangeslider.js libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css">

<!-- Slider 1 -->
<div class="s-wrap slider-container">
  <input type="range" min="0" max="100" value="10" class="range-slider" id="slider1">
  <input type="hidden" id="hiddenInput1" name="CUSTOM_FIELD_1">
  <h3>Value: <span class="range-value"></span></h3>
</div>

<!-- Slider 2 -->
<div class="s-wrap slider-container">
  <input type="range" min="0" max="100" value="20" class="range-slider" id="slider2">
  <input type="hidden" id="hiddenInput2" name="CUSTOM_FIELD_2">
  <h3>Value: <span class="range-value"></span></h3>
</div>

<!-- Slider 3 -->
<div class="s-wrap slider-container">
  <input type="range" min="0" max="100" value="40" class="range-slider" id="slider3">
  <input type="hidden" id="hiddenInput3" name="CUSTOM_FIELD_3">
  <h3>Value: <span class="range-value"></span></h3>
</div>

<center> <button class="button" type="submit">Forward</button> </center>


<script>
$(document).ready(function() {
  $('input[type="range"]').rangeslider({
    polyfill: false,
    onInit: function() {
      this.output = $(this.$range).closest(".s-wrap").find(".range-value").show();
      this.hiddenInput = $(this.$range).next('input[type="hidden"]');
      this.update();
    },
    onSlide: function(position, value) {
      this.output.text(value);
      this.hiddenInput.val(value);  // Update the hidden input's value
    }
  });
});
</script>

Editing the Code

Step 4: Go to your Code and change the values for name on each of the sliders to correspond to the three number custom fields you created from Step 2.

  • Example: name=”my_custom_field”

Step 5: Save the node and publish your Decision Tree and test.

Note: In case if you want to remove a slider, please refer to the image below and delete a block of code that corresponds to a single slider. An example below is deleting the middle slider which is slider 2.

Note: In case if you want to Add a slider, please refer to the image below and delete a block of code that corresponds to a single slider.
1. You need to clone a silder block.
2. Increment the ID value “hiddenInput2” and “slider2”
3. You will increment for every slider code block being added.
Example: id=”hiddenInput3″ and id=”slider2″
4. Lastly assign a custom field to the name value.

Tagged: