[Resolved] trying to get a jquery range slider working…

[Author]

Posts

[Ido Angel]

hey,

Christian once helped me out with a jquery slider on this thread:

https://toolset.com/forums/topic/range-slider-of-custom-field/

I got the slider to work but it wasn't good enough, so I tried another jquery script, and now have no idea how to get the min-max values of the custom field to be used within the slider like before.

this is the html:

<link rel="stylesheet" href="<em><u>hidden link</u></em>">
    <script src="<em><u>hidden link</u></em>"></script>
<div class="search">
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
	<h2>[wpml-string context="wpv-views"]Category[/wpml-string]</h2>
	[wpv-control-post-taxonomy taxonomy="things-category" type="checkboxes" url_param="wpv-things-category"]
</div>
<h2>[wpml-string context="wpv-views"]Price[/wpml-string]</h2>
<input type="text" id="sampleSlider" />

<div class="form-group pricebox">
    [wpv-control-postmeta field="wpcf-thing-price" url_param="wpv-wpcf-thing-price_min" placeholder="Choose Min"]
  </div>
<div class="form-group pricebox" style="margin-right: 0 !important;">  
	[wpv-control-postmeta field="wpcf-thing-price" url_param="wpv-wpcf-thing-price_max" placeholder="Choose Max"]
  </div>
  [wpv-filter-submit output="bootstrap"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

This is the JS, but I still didn't do anything with the min-max values:

var mySlider = new rSlider({
        target: '#sampleSlider',
        values: [100, 200, 300, 400, 500],
        range: true,
        tooltip: false,
        scale: true,
        labels: true,
        set: [100, 500]
    });

The code Christian helped me getting to word on the outdated slider was this:

,

  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 100,
      max: 500,
    step: 100,
      values: [ 100, 500 ],
      slide: function( event, ui ) {
        jQuery('#wpv_control_textfield_wpv-wpcf-thing-price_min').val(formatNumber(ui.values[0]));
        jQuery('#wpv_control_textfield_wpv-wpcf-thing-price_max').val(formatNumber(ui.values[1]));
}});
jQuery('#wpv_control_textfield_wpv-wpcf-thing-price_min, #wpv_control_textfield_wpv-wpcf-thing-price_max').change(function() {
    jQuery('#slider-range').slider('values', [parseInt($('#wpv_control_textfield_wpv-wpcf-thing-price_min').val()), parseInt($('#wpv_control_textfield_wpv-wpcf-thing-price_max').val())]);
});
});

var formatNumber = function(number)
{
    number += "";
    var parts = number.split('.');
    var integer = parts[0];
    var decimal = parts.length > 1 ? '.' + parts[1] : '';
    var regex = /(d+)(d{3})/;
    while (regex.test(integer))
    {
        integer = integer.replace(regex, '$1' + ',' + '$2');
    }
    return integer + decimal;
};

I've tried adding snippets of it to the new JS, but didn't make it.

Any help?

Thanks!

Ido

[Minesh]

Hello. Thank you for contacting the Toolset support.

I can see the previous ticket handled by Christian and I'm going to assign this ticket to him. Pleases hold on and he will get in touch with you as soon as possible.

[Christian Cox]

Sorry I'm not quite clear what you need here. It looks like you have this code to initialize the slider:

var mySlider = new rSlider({
        target: '#sampleSlider',
        values: [100, 200, 300, 400, 500],
        range: true,
        tooltip: false,
        scale: true,
        labels: true,
        set: [100, 500]
    });

I assume the [100,500] part is what you need to modify to set some values initially? If so, you could grab those values from the input fields:

jQuery(document).ready(function(){
var min = jQuery('#wpv_control_textfield_wpv-wpcf-thing-price_min').val();
var max = jQuery('#wpv_control_textfield_wpv-wpcf-thing-price_max').val();
var mySlider = new rSlider({
        target: '#sampleSlider',
        values: [100, 200, 300, 400, 500],
        range: true,
        tooltip: false,
        scale: true,
        labels: true,
        set: [min, max]
    });
});

If I'm misunderstanding, please provide some more specific information about what you need.

[Ido Angel]

hey christian!
thanks 🙂

i tried your code, but it doesn't work. in fact, it doesn't initialize the slider any more.
you are welcome to find out for yourself:

hidden link
admin/4Xhxn,fbhxv2

cheers!
ido

[Christian Cox]

Not sure what's going on here, because the jQuery document ready event is not being triggered. If I remove that event handler and add the code to the filter editor JS panel directly, it gets triggered. Could have something to do with how you're enqueueing assets, but I'm not sure. Check it now and let me know.

This in a View is not a good idea, so make sure these assets are enqueued properly:

<link rel="stylesheet" href="<em><u>hidden link</u></em>">
<script src="<em><u>hidden link</u></em>"></script>

[Ido Angel]

now it's triggered, but not working. the slider is showing doesn't get its values from the min max input fields and the results are the same each search.
i've moved the assets you've mentioned to the header (link) and footer (script).

[Christian Cox]

When I load the page, the inputs have no value. So the max and min of the slider are the default values. When I move the slider range, the input values are not updated. Where is your code to update the input values when the slider range is adjusted?

[Ido Angel]

erm... i don't have such a code? 😐

I've tried adding:

jQuery('#wpv_control_textfield_wpv-wpcf-thing-price_min, #wpv_control_textfield_wpv-wpcf-thing-price_max').change(function() {
    jQuery('#sampleSlider').slider('values', [parseInt($('#wpv_control_textfield_wpv-wpcf-thing-price_min').val()), parseInt($('#wpv_control_textfield_wpv-wpcf-thing-price_max').val())]);
});


var formatNumber = function(number)
{
    number += "";
    var parts = number.split('.');
    var integer = parts[0];
    var decimal = parts.length > 1 ? '.' + parts[1] : '';
    var regex = /(d+)(d{3})/;
    while (regex.test(integer))
    {
        integer = integer.replace(regex, '$1' + ',' + '$2');
    }
    return integer + decimal;
};

but that didn't work.

[Christian Cox]

It sounds like you're asking me to research this custom slider component, which is not supported, figure out how it works, and show you how to implement it. Sorry but that's too far outside the scope of what we provide here, per our support policy. I'll do anything I can to help you set any input values you need, or access any existing filter values with JavaScript, but you must figure out how to use your slider component.

[Ido Angel]

thx, christian, i didn't mean to ask anything inappropriate.
i was just trying to figure out how to assign the view min-max values to the slider, is all.
cheers.

[Christian Cox]

Sure, allow me to clarify what I can and can't do, and why. Your old slider used jQuery().slider(), which is a jQuery slider plugin. It has its own API for setting and reading the input values that correspond to the min and max range handles. You already had that code implemented somewhat before I started on the other ticket (I added comments to your old code here):

$("#price-slider").slider({
...
...
    // This part tells the slider what to do as the range handles are adjusted. It sets the max and min input field values based on the position of those handles.
    slide: function(event, ui) {
        $('#wpv_control_textfield_min-price').val(formatNumber(ui.values[0]));
        $('#wpv_control_textfield_max-price').val(formatNumber(ui.values[1]));
}});

...
//
// This part does the opposite. It listens to changes on the input values, and sets those values in the slider component so the handles change position automatically to match.
$('#wpv_control_textfield_min-price, #wpv_control_textfield_max-price').change(function() {
    $('#price-slider').slider('values', [parseInt($('#wpv_control_textfield_min-price').val()), parseInt($('#wpv_control_textfield_max-price').val())]);
});

I was able to help because the code is already set up to do those two required things - get and set the input values and range handle positions. Your new code uses an entirely different slider component "rSlider", which has its own code functionality and structure (API). I don't know what that is, and that part is your responsibility to figure out. Get to the point where I can see the slider updating something and I can help you from there. jQuery().slider() won't work, because you're not using that slider component anymore.

[Ido Angel]

thx Christian, I understand completely. you've been a great help as always.
Ido

[Ido Angel]

just updating:

got it 🙂

hidden link

[nicholasM]

Hi Ido, just quoting on a project that toolsets search may prove to be the easiest option, however I need to have a couple min-max sliders, it sounds like you have now implemented this in your project. Would you mind sharing what slider plugin ended up working for you. If you have implemented this is a fashion I require I'd be interested in speaking with you directly see if I can compensate you in exchange for your custom loop.

nicholasmurray11ATgmail.com