I am making a custom slider add-on where each step of the slider is customizable. Though I am having difficulties getting the values through to the frontend.
When creating a checkbox or radiobutton field, the text and values are customizable under “choices” and a “show values” option is available, where, if checked, value input fields for the corresponding text input fields appear (see image).
Is it possible to add this “show values” option without checkboxes or radiobuttons, so that I can use it for my custom slider and output both the text and corresponding values to the frontend?
The below image is an example of the current outcome with my current code (which is added below the image).
The code below is my custom field settings:
function slider_settings( $position, $form_id ) {
// Create settings on position 1550 (right after range option)
if ( 1550 == $position ) {
?>
<li class="slider_value_relations field_setting">
<div style="clear:both;">
<?php _e( 'Value Relations', 'gsf-locale' ); ?>
<?php gform_tooltip( 'number_range' ); ?>
</div>
<div style="width:50%;float:left"><input type="text" id="slider_min_value_relation" style="width:100%;" onchange="SetFieldProperty('slider_min_value_relation', this.value);" /><label for="slider_min_value_relation"><?php _e( 'Min', 'gsf-locale' ); ?></label></div>
<div style="width:50%;float:left"><input type="text" id="slider_max_value_relation" style="width:100%;" onchange="SetFieldProperty('slider_max_value_relation', this.value);" /><label for="slider_max_value_relation"><?php _e( 'Max', 'gsf-locale' ); ?></label></div>
<br class="clear">
</li>
<li class="slider_step field_setting">
<div style="clear:both;">
<?php _e( 'Step', 'gsf-locale' ); ?>
<?php gform_tooltip( 'slider_step' ); ?>
</div>
<div style="width:25%;"><input type="number" id="slider_step" step=".01" style="width:100%;" onchange="SetFieldProperty('slider_step', this.value);" /></div>
</li>
<li class="slider_start field_setting">
<div style="clear:both;">
<?php _e( 'Start', 'gsf-locale' ); ?>
<?php gform_tooltip( 'slider_start' ); ?>
</div>
<div style="width:25%;"><input type="number" id="slider_start" value="0" style="width:100%;" onchange="SetFieldProperty('slider_start', this.value);" /></div>
</li>
<li class="slider_step_values field_setting">
<div style="clear:both;">
<?php _e( 'Step Values / Pool Størrelser', 'gsf-locale' ); ?>
<?php gform_tooltip( 'slider_step_values' ); ?>
</div>
<div style="width:100%; display: flex; margin-bottom: 5px;">
<label style="width: 10%; font-size: 15px;">0</label>
<input type="text" name="slider_key0" id="slider_key0" style="width:45%;" value="Ingen størrelse valgt" disabled />
<input type="number" name="slider_value0" id="slider_value0" style="width:45%;" value='0' disabled />
</div>
<div style="width:100%; display: flex; margin-bottom: 5px;">
<label style="width: 10%; font-size: 15px;">1</label>
<input type="text" name="slider_key1" id="slider_key1" style="width:45%;" placeholder="Pool størrelse" onchange="SetFieldProperty('slider_key1', this.value);" />
<input type="number" name="slider_value1" id="slider_value1" style="width:45%;" placeholder="Pris" onchange="SetFieldProperty('slider_value1', this.value);" />
</div>
<div style="width:100%; display: flex; margin-bottom: 5px;">
<label style="width: 10%; font-size: 15px;">2</label>
<input type="text" name="slider_key2" id="slider_key2" style="width:45%;" placeholder="Pool størrelse" onchange="SetFieldProperty('slider_key2', this.value);" />
<input type="number" name="slider_value2" id="slider_value2" style="width:45%;" placeholder="Pris" onchange="SetFieldProperty('slider_value2', this.value);" />
</div>
<div style="width:100%; display: flex; margin-bottom: 5px;">
<label style="width: 10%; font-size: 15px;">3</label>
<input type="text" name="slider_key3" id="slider_key3" style="width:45%;" placeholder="Pool størrelse" onchange="SetFieldProperty('slider_key3', this.value);" />
<input type="number" name="slider_value3" id="slider_value3" style="width:45%;" placeholder="Pris" onchange="SetFieldProperty('slider_value3', this.value);" />
</div>
<div style="width:100%; display: flex; margin-bottom: 5px;">
<label style="width: 10%; font-size: 15px;">4</label>
<input type="text" name="slider_key4" id="slider_key4" style="width:45%;" placeholder="Pool størrelse" onchange="SetFieldProperty('slider_key4', this.value);" />
<input type="number" name="slider_value4" id="slider_value4" style="width:45%;" placeholder="Pris" onchange="SetFieldProperty('slider_value4', this.value);" />
</div>
<div style="width:100%; display: flex; margin-bottom: 5px;">
<label style="width: 10%; font-size: 15px;">5</label>
<input type="text" name="slider_key5" id="slider_key5" style="width:45%;" placeholder="Pool størrelse" onchange="SetFieldProperty('slider_key5', this.value);" />
<input type="number" name="slider_value5" id="slider_value5" style="width:45%;" placeholder="Pris" onchange="SetFieldProperty('slider_value5', this.value);" />
</div>
<div style="width:100%; display: flex; margin-bottom: 5px;">
<label style="width: 10%; font-size: 15px;">6</label>
<input type="text" name="slider_key6" id="slider_key6" style="width:45%;" placeholder="Pool størrelse" onchange="SetFieldProperty('slider_key6', this.value);" />
<input type="number" name="slider_value6" id="slider_value6" style="width:45%;" placeholder="Pris" onchange="SetFieldProperty('slider_value6', this.value);" />
</div>
<div style="width:100%; display: flex; margin-bottom: 5px;">
<label style="width: 10%; font-size: 15px;">7</label>
<input type="text" name="slider_key7" id="slider_key7" style="width:45%;" placeholder="Pool størrelse" onchange="SetFieldProperty('slider_key7', this.value);" />
<input type="number" name="slider_value7" id="slider_value7" style="width:45%;" placeholder="Pris" onchange="SetFieldProperty('slider_value7', this.value);" />
</div>
<div style="width:100%; display: flex; margin-bottom: 5px;">
<label style="width: 10%; font-size: 15px;">8</label>
<input type="text" name="slider_key8" id="slider_key8" style="width:45%;" placeholder="Pool størrelse" onchange="SetFieldProperty('slider_key8', this.value);" />
<input type="number" name="slider_value8" id="slider_value8" style="width:45%;" placeholder="Pris" onchange="SetFieldProperty('slider_value8', this.value);" />
</div>
<div style="width:100%; display: flex; margin-bottom: 5px;">
<label style="width: 10%; font-size: 15px;">9</label>
<input type="text" name="slider_key9" id="slider_key9" style="width:45%;" placeholder="Pool størrelse" onchange="SetFieldProperty('slider_key9', this.value);" />
<input type="number" name="slider_value9" id="slider_value9" style="width:45%;" placeholder="Pris" onchange="SetFieldProperty('slider_value9', this.value);" />
</div>
<div style="width:100%; display: flex; margin-bottom: 5px;">
<label style="width: 10%; font-size: 15px;">10</label>
<input type="text" name="slider_key10" id="slider_key10" style="width:45%;" placeholder="Pool størrelse" onchange="SetFieldProperty('slider_key10', this.value);" />
<input type="number" name="slider_value10" id="slider_value10" style="width:45%;" placeholder="Pris" onchange="SetFieldProperty('slider_value10', this.value);" />
</div>
</li>
<?php
}
} // end slider_settings