[Resolved] Price range slider

[Author]

Posts

[toolset-dave]

Hi,

I have added this bootstrap price range slider to my custom search: hidden link And I want to have it instead of two fields Price min and Price max (they are set up properly and work fine).

<input id="price-range" type="text">

$("#price-range").slider({

  // the id of the slider element
  id: "",

  // minimum value
  min: 0,

  // maximum value
  max: 5000,

  // increment step
  step: 1,

  // the number of digits shown after the decimal.
  precision: 0,

  // 'horizontal' or 'vertical'
  orientation: 'horizontal',

  // initial value
  value: [400,1000],

  // enable range slider
  range: true,

  // selection placement. 
  // 'before', 'after' or 'none'. 
  // in case of a range slider, the selection will be placed between the handles
  selection: 'before',

  // 'show', 'hide', or 'always'
  tooltip: 'show',

  // show two tooltips one for each handler
  tooltip_split: false,

  // 'round', 'square', 'triangle' or 'custom'
  handle: 'round',

  // whether or not the slider should be reversed
  reversed: false,

  // whether or not the slider is initially enabled
  enabled: true,

  // callback
  formatter: function formatter(val) {
    if (Array.isArray(val)) {
      return val[0] + " : " + val[1];
    } else {
      return val;
    }
  },

  // The natural order is used for the arrow keys. 
  // Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. 
  // By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value.
  natural_arrow_keys: false,

  // Used to define the values of ticks. 
  // Tick marks are indicators to denote special values in the range. 
  // This option overwrites min and max options.
  ticks: [],

  // Defines the positions of the tick values in percentages. 
  // The first value should always be 0, the last value should always be 100 percent.
  ticks_positions: [],

  // Defines the labels below the tick marks. Accepts HTML input.
  ticks_labels: [],

  // Used to define the snap bounds of a tick. 
  // Snaps to the tick if value is within these bounds.
  ticks_snap_bounds: 0,

  // Used to allow for a user to hover over a given tick to see it's value.
  ticks_tooltip: false,

  // Position of tooltip, relative to slider. 
  // Accepts 'top'/'bottom' for horizontal sliders and 'left'/'right' for vertically orientated sliders. 
  // Default positions are 'top' for horizontal and 'right' for vertical slider.
  tooltip_position: null,

  // Set to 'logarithmic' to use a logarithmic scale.
  scale: 'linear',

  // Focus the appropriate slider handle after a value change.
  focus: false,

  // ARIA labels for the slider handle's, Use array for multiple values in a range slider.
  labelledby: null,

  // Defines a range array that you want to highlight
  rangeHighlights: []
  
});

[Christian Cox]

Okay please note we do not support custom filter controls, so you'll be on your own to figure it out. If the slider updates the existing min and max price inputs as it is changed, you don't need to do anything else. Just hide those existing inputs using CSS. If you use AJAX to update the results of your View when inputs change, you can use jQuery to trigger a "change" event on any form element that includes the 'js-wpv-filter-trigger' CSS class whenever your slider is updated. Example:

jQuery(document).ready(function(){
  jQuery.on('your-slider-change-event', function() {
    jQuery('.js-wpv-filter-trigger').first().trigger('change');  // trigger ajax update
  });
});

If your slider does not update the existing min and max price inputs, you can do it yourself using JavaScript, or you'll have to capture the values provided by the slider and use wpv_filter_query to modify the search filters applied to your query with PHP. Example:

add_filter( 'wpv_filter_query', 'add_custom_price_range', 100, 3 );
function add_custom_price_range ( $query, $view_settings, $view_id ) {
  if( $view_id == 1234 ) {
    $my_variable = $_GET['field-id']; // this is how you access the value of any input by ID
    $your_min_price_value = 'you need to figure out how to get the minimum price value from the range slider';
    $your_max_price_value = 'you need to figure out how to get the maximum price value from the range slider';
    $meta_query_args = array(
	'relation' => 'AND', // Optional, defaults to "AND"
	array(
		'key'     => 'wpcf-price',
		'value'   => $your_min_price_value,
		'compare' => '>=',
                'type' => 'NUMERIC'
	),
        array(
		'key'     => 'wpcf-price',
		'value'   => $your_max_price_value,
		'compare' => '<=',
                'type' => 'NUMERIC'
	)
);
    $query['meta_query'] = $meta_query_args;
  }
  return $query;
}

The wpv_filter_query filter is documented here:
https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_query

Let me know if you have additional questions about that.