# bit-form/2.16.2/includes/Admin/Form/ExtraFieldJS/SetSliderFieldValue.php

Bit Form – Contact Form, Payment Forms, Multi Step Forms, Calculator & Custom Form Builder, version 2.16.2. 28 lines.

- Page: https://pluginprobe.com/plugins/bit-form/2.16.2/code/includes/Admin/Form/ExtraFieldJS/SetSliderFieldValue.php
- Raw: https://pluginprobe.com/plugins/bit-form/2.16.2/raw/includes/Admin/Form/ExtraFieldJS/SetSliderFieldValue.php
- Modified: 2024-09-29T09:41:32+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/bit-form/2.16.2/code/includes/Admin/Form/ExtraFieldJS/SetSliderFieldValue.php#L10-L20`.

```php
<?php

namespace BitCode\BitForm\Admin\Form\ExtraFieldJS;

class SetSliderFieldValue
{
  public static function init($fk, $field, $contentId)
  {
    return <<<FUNCTIONDEF
        function setSliderFieldValue(formContentId = null) {
          const contentIds = formContentId ? [formContentId] : Object.keys(bf_globals);
          contentIds.forEach(contentId => {
            bfSelect("#form-"+contentId)?.querySelectorAll("input[type='range']").forEach(function(el){
              el.addEventListener("input",function(e){
                e.target.parentNode.style.setProperty('--bfv-fld-val', JSON.stringify(el.value));
                const bfFill = ((el.value - (el.min || 0)) / ((el.max || 100) - (el.min || 0))) * 100;
                e.target.style.setProperty('--bfv-fill-lower-track', `\${bfFill}%`, 'important');
              });
              const style = window.getComputedStyle(el);
              el.style.setProperty('--bfv-track-dir', style.direction === 'rtl'? 'to left' : 'to right');
            });
          })
        }
        
FUNCTIONDEF;
  }
}

```