Wordpress - How to set/connect the Slider Numbers states with the slider?

Leonwalker
November 8, 2021
46 views
1 vote
2 Answers

on the left and right side of my slider are the states (numbers/price) from and until how much you can search Products (Price-Slider /Price-Filter).
But the numbers are static, so If I use the slider then the numbers stay the same…
I would like the numbers to change with the slider.
How I can connect the numbers with my Slider?

Please see here (yellow marked)->SliderStates

[![enter image description here][1]][1]

Here the HTML Info of my filter:

<form action="" method="GET" class="filterform form-inline"
data-ajax="true" data-id="5657" data-source-id="95">
<div class="form-group">
    <label for="price7068" class="control-label">Nach Preis</label>
    <div class="slide">
        <span>1</span>
        <div class="slider slider-horizontal" id="">
            <div class="slider-track">
                <div class="slider-track-low" style="left: 0px; width: 0%;"></div>
                <div class="slider-selection" style="left: 0%; width: 47.2047%;"></div>
                <div class="slider-track-high" style="right: 0px; width: 52.7953%;"></div>
                <div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="1"
                    aria-valuemax="10000" aria-valuenow="1" tabindex="0" style="left: 0%;"></div>
                <div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="1"
                    aria-valuemax="10000" aria-valuenow="4721" tabindex="0" style="left: 47.2047%;"></div>
            </div>
            <div class="tooltip tooltip-main top" role="presentation" style="left: 23.6024%; margin-left: -40px;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1 € - 4721 €</div>
            </div>
            <div class="tooltip tooltip-min top" role="presentation"
                style="left: 0%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1</div>
            </div>
            <div class="tooltip tooltip-max top" role="presentation"
                style="left: 47.2047%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">4721</div>
            </div>
        </div><input id="price7068" name="price" data-slider-label=" €" type="text" class="bt-slider" value="1,4721"
            data-slider-min="1" data-slider-max="10000" data-slider-step="10" data-slider-value="[1,10000]"
            data-value="1,4721" style="display: none;">
        <span>10000</span>
    </div>
    <div class="clearfix"></div>
</div>
<div class="form-group">
    <label for="product_rating4028" class="control-label">Nach Bewertung</label>
    <div class="slide">
        <span>0</span>
        <div class="slider slider-horizontal" id="">
            <div class="slider-track">
                <div class="slider-track-low" style="left: 0px; width: 20%;"></div>
                <div class="slider-selection" style="left: 20%; width: 80%;"></div>
                <div class="slider-track-high" style="right: 0px; width: 0%;"></div>
                <div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
                    aria-valuenow="1" tabindex="0" style="left: 20%;"></div>
                <div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
                    aria-valuenow="5" tabindex="0" style="left: 100%;"></div>
            </div>
            <div class="tooltip tooltip-main top" role="presentation" style="left: 60%; margin-left: -58.5px;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1 Sterne - 5 Sterne</div>
            </div>
            <div class="tooltip tooltip-min top" role="presentation"
                style="left: 20%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1</div>
            </div>
            <div class="tooltip tooltip-max top" role="presentation"
                style="left: 100%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">5</div>
            </div>
        </div><input id="product_rating4028" name="product_rating" data-slider-label=" Sterne" type="text"
            class="bt-slider" value="1,5" data-slider-min="0" data-slider-max="5" data-slider-step="0.5"
            data-slider-value="[0,5]" data-value="1,5" style="display: none;">
        <span>5</span>
    </div>
    <div class="clearfix"></div>
</div>
<div class="form-group">
    <label for="marke2417" class="control-label">Nach Marke</label>
    <select id="marke2417" name="marke[]" class="form-control" multiple="">
        <option value="msi">MSI</option>
        <option value="nokia">Nokia</option>
        <option value="samsung">Samsung</option>
        <option value="sony">Sony</option>
    </select>
    <div class="clearfix"></div>
</div>
<div class="form-group">
    <label for="kategorie5529" class="control-label">Nach Kategorie</label>
    <select id="kategorie5529" name="kategorie" class="form-control">
        <option value="">Kategorie wählen</option>
        <option value="automotorrad">Auto &amp; Motorrad</option>
        <option value="babykinderwelt">Baby &amp; Kinderwelt</option>
        <option value="computersoftware">Computer &amp; Software</option>
        <option value="druckerscanner">&nbsp;&nbsp;Drucker &amp; Scanner</option>
        <option value="3ddruckerk">&nbsp;&nbsp;&nbsp;&nbsp;3D-Drucker</option>
    </select>
    <div class="clearfix"></div>
</div>
<input type="hidden" name="paged" value="1"><input type="hidden" name="layout" value=""><input type="hidden"
    name="orderby" value="">
<div class="form-group form-group-block">
    <a href="/" class="btn btn-xs btn-link filter-reset pull-right">Filter zurücksetzen</a>
    <button type="submit" class="btn btn-at">
        Filtern </button>

</div>

<div class="clearfix"></div>

Also my Price-Slide-PHP-Code:

// values & steps
        $values = at_field_database_min_max_value( $this->name, 'product' );
        if ( isset( $this->field['min_value'] ) && $this->field['min_value'] != false ) $values->min = $this->field['min_value'];
        if ( isset( $this->field['max_value'] ) && $this->field['max_value'] != false ) $values->max = $this->field['max_value'];
        $steps = at_field_step_value( $values->min, $values->max, '', $this->name );
        ?>
        <div class="form-group">
            <label for="<?php echo $this->id; ?>" class="control-label"><?php echo $title ?></label>
            <div class="slide">
                <span><?php echo $values->min; ?></span>
                <input id="<?php echo $this->id; ?>" name="<?php echo $this->name; ?>" data-slider-label="<?php echo apply_filters( 'at_filter_price_label', ' ' . at_get_default_currency( true ) ); ?>" type="text" class="bt-slider" value="<?php if ( $this->value ) {
                    echo $this->value;
                } ?>" data-slider-min="<?php echo $values->min; ?>" data-slider-max="<?php echo $values->max; ?>" data-slider-step="<?php echo $steps; ?>" data-slider-value="[<?php if ( $this->value ) {
                    echo $this->value;
                } else {
                    echo $values->min . ',' . $values->max;
                } ?>]">
                <span><?php echo $values->max; ?></span>
            </div>
            <?php echo( $instruction ? '<span class="filter-instruction">' . $instruction . '</span>' : '' ); ?>
            <div class="clearfix"></div>
        </div>

Answers

For those who are still searching for a solution without a separate javascript code. There is little easy solution without writing a javascript or jquery function:

1<input type="range" value="100" min="1" max="100" oninput="this.nextElementSibling.value = this.value">

<output>100</output>

Made a new solution with js only

    $(document).ready(function() {
        $("#slider").slider({
            min: 1,
            max: 100,
            step: 1,
            values: [1, 100],
            slide: function(event, ui) {
                if ( ui.values[0] >= ui.values[1] ) {
                    return false;
                } else {
                    for (var i = 0; i < ui.values.length; ++i) {
                            document.getElementById("spanMin").textContent= ui.values[1];    
                            document.getElementById("spanMax").textContent= ui.values[0];
                    }
                }
            }
        });
    
        $("input.sliderValue").change(function() {
            var $this = $(this);
            $("#slider").slider("values", $this.data("index"), $this.val());
        });
    });

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}

.slidersStyle div, span {
  display: inline-block;
}

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">  
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form>
  <div class="slidersStyle">
      <span id="spanMax" style="display: inline-block;" class="sliderValue">1</span>
      <div style="width:300px; margin-left: 15px; margin-right: 15px;" id="slider">           </div>    
      <span id="spanMin" class="sliderValue">100</span>
  </div>
</form>

        $(document).ready(function() {
            $("#slider").slider({
                min: 1,
                max: 10000,
                step: 1,
                values: [1, 10000],
                slide: function(event, ui) {
                    if ( ui.values[0] >= ui.values[1] ) {
                        return false;
                    } else {
                        for (var i = 0; i < ui.values.length; ++i) {
                                document.getElementById("spanMin").textContent= ui.values[1];    
                                document.getElementById("spanMax").textContent= ui.values[0];
                        }
                    }
                }
            });
        
            $("input.sliderValue").change(function() {
                var $this = $(this);
                $("#slider").slider("values", $this.data("index"), $this.val());
            });
        });

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">  
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form action="https://entdeckepreise.de/filter/produktfilter/" method="GET" class="filterform form-inline"
data-ajax="true" data-id="5657" data-source-id="95">
<div class="form-group" style="margin: 50px;">
    <label for="price7068" class="control-label">Nach Preis</label>
    <div class="slide">
        <span id="spanMax" style="display: inline-block;" class="sliderValue">1</span>
        <div class="slider slider-horizontal" id="">
            <div class="slider-track">
                <div class="slider-track-low" style="left: 0px; width: 0%;"></div>
                <div class="slider-selection" style="left: 0%; width: 47.2047%;"></div>
                <div class="slider-track-high" style="right: 0px; width: 52.7953%;"></div>
                <div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="1"
                    aria-valuemax="10000" aria-valuenow="1" tabindex="0" style="left: 0%;"></div>
                <div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="1"
                    aria-valuemax="10000" aria-valuenow="4721" tabindex="0" style="left: 47.2047%;"></div>
            </div>
            <div class="tooltip tooltip-main top" role="presentation" style="left: 23.6024%; margin-left: -40px;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1 € - 4721 €</div>
                <div style="width:300px; margin-left: 15px; margin-right: 15px;" id="slider">           </div>    
            </div>
            <div class="tooltip tooltip-min top" role="presentation"
                style="left: 0%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1</div>
            </div>
            <div class="tooltip tooltip-max top" role="presentation"
                style="left: 47.2047%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">4721</div>
            </div>
        </div><input id="price7068" name="price" data-slider-label=" €" type="text" class="bt-slider" value="1,4721"
            data-slider-min="1" data-slider-max="10000" data-slider-step="10" data-slider-value="[1,10000]"
            data-value="1,4721" style="display: none;">
        <span id="spanMin" class="sliderValue">10000</span>
    </div>
    <div class="clearfix"></div>
</div>
<div class="form-group">
    <label for="product_rating4028" class="control-label">Nach Bewertung</label>
    <div class="slide">
        <span>0</span>
        <div class="slider slider-horizontal" id="">
            <div class="slider-track">
                <div class="slider-track-low" style="left: 0px; width: 20%;"></div>
                <div class="slider-selection" style="left: 20%; width: 80%;"></div>
                <div class="slider-track-high" style="right: 0px; width: 0%;"></div>
                <div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
                    aria-valuenow="1" tabindex="0" style="left: 20%;"></div>
                <div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
                    aria-valuenow="5" tabindex="0" style="left: 100%;"></div>
            </div>
            <div class="tooltip tooltip-main top" role="presentation" style="left: 60%; margin-left: -58.5px;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1 Sterne - 5 Sterne</div>
            </div>
            <div class="tooltip tooltip-min top" role="presentation"
                style="left: 20%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1</div>
            </div>
            <div class="tooltip tooltip-max top" role="presentation"
                style="left: 100%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">5</div>
            </div>
        </div><input id="product_rating4028" name="product_rating" data-slider-label=" Sterne" type="text"
            class="bt-slider" value="1,5" data-slider-min="0" data-slider-max="5" data-slider-step="0.5"
            data-slider-value="[0,5]" data-value="1,5" style="display: none;">
        <span>5</span>
    </div>
    <div class="clearfix"></div>
</div>
<div class="form-group">
    <label for="marke2417" class="control-label">Nach Marke</label>
    <select id="marke2417" name="marke[]" class="form-control" multiple="">
        <option value="msi">MSI</option>
        <option value="nokia">Nokia</option>
        <option value="samsung">Samsung</option>
        <option value="sony">Sony</option>
    </select>
    <div class="clearfix"></div>
</div>
<div class="form-group">
    <label for="kategorie5529" class="control-label">Nach Kategorie</label>
    <select id="kategorie5529" name="kategorie" class="form-control">
        <option value="">Kategorie wählen</option>
        <option value="automotorrad">Auto &amp; Motorrad</option>
        <option value="babykinderwelt">Baby &amp; Kinderwelt</option>
        <option value="computersoftware">Computer &amp; Software</option>
        <option value="druckerscanner">&nbsp;&nbsp;Drucker &amp; Scanner</option>
        <option value="3ddruckerk">&nbsp;&nbsp;&nbsp;&nbsp;3D-Drucker</option>
    </select>
    <div class="clearfix"></div>
</div>
<input type="hidden" name="paged" value="1"><input type="hidden" name="layout" value=""><input type="hidden"
    name="orderby" value="">
<div class="form-group form-group-block">
    <a href="/" class="btn btn-xs btn-link filter-reset pull-right">Filter zurücksetzen</a>
    <button type="submit" class="btn btn-at">
        Filtern </button>

</div>

<div class="clearfix"></div>

Your design is now also implemented here

$(document).ready(function() {
  
   $( "#slider-range" ).slider({
     range: true,
     min: 1,
     max: 100,
     values: [ 1, 100 ],
     slide: function( event, ui ) {
       $( "#min" ).val( ui.values[ 0 ] );
       $( "#max" ).val( ui.values[ 1 ] );
     }
   });
 });

body {
   font-family: Verdana, Arial, sans-serif;
   font-size: 12px;
}

#min   {
   width:14px;
}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
   border-radius: 50%!important;
}

.ui-slider .ui-slider-handle {
   width: 1.8em!important;
   height: 1.8em!important;
}

.ui-slider-horizontal .ui-slider-handle {
   top: -0.45em!important;
}

.ui-widget-content {
   background: #dddddd!important;
}

.ui-widget-header {
   background: #9ac836!important;

}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<form>
   <input type="text" id="min" value="1" readonly style="border:0; display:inline-block;">
   <div id="slider-range" style="width:200px; margin:0px 25px; display: inline-block;" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
   <div class="ui-slider-range ui-corner-all ui-widget-header" style=""></div>
      <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>
      <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>
   </div>
  <input type="text" id="max" value="100" readonly style="border:0; display:inline-block;">
</form>

Replace the script i provided you before by this:

    let filterForm = document.querySelector("form.filterform");
if (null !== filterForm) {
    let waitS = setInterval(wait_sliders, 200);
    function wait_sliders() {
        if (null !== filterForm.querySelector(".slider-handle")) {

            // Listen new values
            let slides = filterForm.querySelectorAll('.slide');
            var observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (mutation.type === "attributes") {
                        let values = mutation.target.value.split(',');
                        let spans = mutation.target.closest('.slide').querySelectorAll('span');
                        spans[0].innerText = values[0];
                        spans[spans.length - 1].innerText = values[1];
                    }
                });
            });
            
            slides.forEach(slide => {
                let el = slide.querySelector('.bt-slider');
                observer.observe(el, { attributes: true });
            });
            
            filterForm.querySelectorAll("input,select,.slider-handle").forEach((e) => {
                let event = e.classList.contains("slider-handle") ? ["mouseup", "touchend"] : ["change"];
                for (let i = 0; i < event.length; i++) {
                    e.addEventListener(event[i], (e) => {
                        filterForm.querySelector('button[type="submit"]').click();
                    });
                }
            }),
                filterForm.querySelector('button[type="submit"]').click();
            clearInterval(waitS);
        }
    }
}

Please signup or login to give your own answer.

Click here to cancel reply.

WordPress – How to set/connect the Slider Numbers states with the slider?

Answers