Recorder state custom ui

Hello,
I have custom ui from https://www.webcomponents.org/element/PFElements/pf-progress-slider/demo/demo/index.html

pf-progress-slider: (in www/custom_ui)

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../iron-behaviors/iron-button-state.html">
<link rel="import" href="../paper-ripple-behavior.html">

<!--
### Styling
The following custom properties and mixins are available for styling:
Custom property                         | Description                             | Default
----------------------------------------|-----------------------------------------|-------------------------
`--pf-default-bar-color`                |  Default color of bar                   | silver
`--pf-pass-bar-color`                   |  Passed color of bar                    | 27ae60
`--pf-fail-bar-color`                   |  Failed color of bar                    | e74c3c
`--pf-skip-bar-color`                   |  Skipped color of bar                   | 3498db
### Custom Events
Custom Event                     | Description
---------------------------------|----------------------------------------
`position-changed`               |  This event is Fired when position is changed
### Methods

Methods                                 | Description
----------------------------------------|--------------------------
`setCurrentPos(value)`                  |  Sets the current position of the slider to the given value
`getCurrentPos()`                |  Returns current value
`setPosState(state, step)`                      |  Sets the state of the given step e.g. set step 3 as pass
@demo demo/index.html
-->

<dom-module id="pf-progress-slider">
  <template>
    <style>
      * {
        transition: 0.3s;
      }

       :host {
        display: block;
        height: 100%;
        width: 100%;
      }

      #container {
        display: inline-block;
        margin: 0px;
        padding: 0px;
        transform-origin: 20px;
      }

      #progressbar {
        display: table;
        margin-left: 15px;
        height: 8px;
        width: calc(100% - 30px);
      }

      #slider {
        width: 100%;
        --paper-slider-height: 1px;
        --paper-slider-knob-color: silver;
        --paper-slider-knob-start-color: silver;
        --paper-slider-knob-start-border-color: silver;
        --paper-slider-container-color: silver;
        --paper-slider-active-color: silver;
      }

      .pstep {
        display: table-cell;
        border-bottom: 4px solid transparent;
      }

      .default {
        border-bottom-color: var(--pf-default-bar-color, silver);
      }

      .temp_a {
        border-bottom-width: 6px;
        border-bottom-color:var(--pf-pass-bar-color, red) ;
      }
      .temp_b {
        border-bottom-width: 6px;
        border-bottom-color:var(--pf-pass-bar-color, green) ;
      }
      .temp_c {
        border-bottom-width: 6px;
        border-bottom-color:var(--pf-pass-bar-color, blue) ;
      }

      .del {
        /*border-bottom-width: 6px;*/
        border-bottom-color:var(--pf-fail-bar-color, silver) ;
        
      }

      .current {
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-width: 8px !important;
      }
    </style>
   <paper-input label="text input"></paper-input>
    <demo-snippet>
      <div style="width: 100%; text-align:center; padding: 10px 0px;"></div>
        <button on-click="TempA">temp_a</button>
        <button on-click="TempB">temp_b</button>
        <button on-click="TempC">temp_c</button>
        <button on-click="Delete">del</button>
        <!--<input value="1" id="jump-val" type="text" onkeyup="jump(0, this)">-->
      </div>
      <div id="container">
        <div id="progressbar"></div>
        <paper-slider id="slider" min="1" max="{{steps}}"></paper-slider>
      </div>
    </demo-snippet>
  </template>

  <script>
    /**
     * `pf-progress-slider`
     * Interval progress bar.
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class PfProgressSlider extends Polymer.Element {
      /**
       * Returns the name of the element.
       */
      static get is() {
        return 'pf-progress-slider';
      }
      /**
       * Returns the element properties.
       *  - vertical: boolean element indicating orientation.
       *  - steps: number element for the number of steps.
       *  - current: number element indicating current step.
       */
      static get properties() {
        return {
          hass: {
            type: Object,
          },
          vertical: {
            type: Boolean,
            value: false
          },
          steps: {
            type: Number,
            value: 24
          },
          current: {
            type: Number,
            value: 1
          },
          arrayHours: {
            type: Array,
            value: function() { return [] },
          },
          stateObj: {
            type: Object,
          },
        };
      }

      /**
       * 
       */
      TempA() {
        this.setPosState('temp_a', 0);
      }
      TempB() {
        this.setPosState('temp_b', 0);
      }
      TempC() {
        this.setPosState('temp_c', 0);
      }
      Delete() {
        this.setPosState('del', 0);
      }

      connectedCallback() {
        super.connectedCallback();
        for (var i = 0; i < this.steps; i++) {
          var cell = document.createElement('div');
          cell.classList.add('pstep', 'default');
          this.$.progressbar.appendChild(cell);
        }
        this.$.container.style.width = '100%';
        this.$.slider.$.sliderBar.style.paddingTop = '7px';
        this.$.slider.$.sliderBar.style.paddingBottom = '7px';
        this.$.slider.$.sliderKnob.querySelector('.slider-knob-inner').style.marginTop = '2px';
        this.$.slider.$.sliderKnob.querySelector('.slider-knob-inner').style.marginBottom = '2px';
        // this.$.slider._positionKnob = function(ratio) {
        //   this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
        //   this._setRatio(this._calcRatio(this.immediateValue) * 100);
        //   var interval = 100 / this.max;
        //   this.$.sliderKnob.style.left = ((interval * (this.immediateValue-1)) + interval/2) + '%';
        //   if (this.dragging) {
        //     this._knobstartx = (this.ratio * this._w) / 100;
        //     this.translate3d(0, 0, 0, this.$.sliderKnob);
        //   }
        // }
        //this.$.slider._createRipple = function () {
        //  this._rippleContainer = this.$.sliderKnob;
        //  return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
        //}
        if (this.vertical) {
          this.$.container.style.transform = 'rotate(90deg)';
          this.$.container.style.width = this.clientHeight + 'px';
          var self = this;
          this.$.slider._trackX = function (event) {
            if (!this.dragging) {
              this._trackStart(event);
            }
            var direction = this._isRTL ? -1 : 1;
            var dx = Math.min(this._maxx, Math.max(this._minx, event.detail.dx * direction));
            if (self.vertical)
              dx = Math.min(this._maxx, Math.max(this._minx, event.detail.dy * direction));
            this._x = this._startx + dx;
            var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w * 100));
            this._setImmediateValue(immediateValue);
            var translateX = ((this._calcRatio(this.immediateValue) * this._w) - this._knobstartx);
            this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
          }
          this.$.slider._bardown = function (event) {
            this._w = this.$.sliderBar.offsetWidth;
            var rect = this.$.sliderBar.getBoundingClientRect();
            var ratio = (event.detail.x - rect.left) / this._w * 100;
            if (self.vertical)
              ratio = (event.detail.y - rect.top) / this._w * 100;
            if (this._isRTL) {
              ratio = 100 - ratio;
            }
            var prevRatio = this.ratio;
            this._setTransiting(true);
            this._positionKnob(ratio);
            this.debounce('expandKnob', this._expandKnob, 60);
            if (prevRatio === this.ratio) {
              this._setTransiting(false);
            }
            this.async(function () {
              this.fire('change', { composed: true });
            });
            event.preventDefault();
            this.focus();
          }
        }
        this.$.slider._positionKnob(0);
        this._setCurrent(1);
      }
      /**
       *
       */
      ready() {
        super.ready();
        var self = this;
        this.$.slider.addEventListener('immediate-value-changed', function () { self._setCurrent(this.immediateValue) });
        this.$.slider.addEventListener('value-changed', function () { self._setCurrent(this.value) });
      }
      setCurrentPos(value) {
        if (value < 1 || value > this.steps || isNaN(value) || value == this.current)
          return;
        var diff = this.current - value;
        for (var i = 0; i < Math.abs(diff); i++)
          (diff < 0) ? this.$.slider.increment() : this.$.slider.decrement();

        this.dispatchEvent(new CustomEvent('position-changed', { detail: { pos: this.current } }));
      }
      setPosState(state, step) {

        var index = this.GetExistHours();
        console.log(index);
        console.log(this.arrayHours);
        if(state != "del")
        {
          if(index == -1)
          {
           this.AddHour(state);
          }
          else
          {          
             this.splice('arrayHours', index, 1);
             this.AddHour(state);
          }      
        }

        if(state == "del" && index != -1)
        {
          this.splice('arrayHours', index, 1);
        }

        var serviceData = {entity_id: "input_text."+this.stateObj.state, value: this.arrayHours}
            this.hass.callService('input_text', 'set_value', serviceData);
            
        step = step || this.current;
        if (step < 1 || step > this.steps)
          return;
        var steps = this.shadowRoot.querySelectorAll('.pstep');
        steps[step - 1].classList.remove('default', 'temp_a', 'temp_b', 'temp_c', 'del');
        steps[step - 1].classList.add(state);
        if (step == this.current)
          this.$.slider.increment();
        this.dispatchEvent(new CustomEvent('position-changed', { detail: { pos: this.current } }));
      }
      AddHour(state) {
        if(state == "temp_a")
        {
          this.push('arrayHours', 'A'+this.current);
        }
        if(state == "temp_b")
        {
          this.push('arrayHours', 'B'+this.current);
        }
        if(state == "temp_c")
        {
          this.push('arrayHours', 'C'+this.current);
        }
      }
      GetExistHours() {
        var indexA = this.arrayHours.indexOf("A"+this.current);
        if(indexA != -1)
        {
           return indexA;
        }
        var indexB = this.arrayHours.indexOf("B"+this.current);
        if(indexB != -1)
        {
           return indexB;
        }
        var indexC = this.arrayHours.indexOf("C"+this.current);
        if(indexC != -1)
        {
           return indexC;
        }

        return -1;       
      }

      _setCurrent(value) {
        if (value < 1 || value > this.steps || isNaN(value))
          return;
        var steps = this.shadowRoot.querySelectorAll('.pstep');
        steps[this.current - 1].classList.remove('current');
        steps[value - 1].classList.add('current');
        this.current = value;
        this.dispatchEvent(new CustomEvent('position-changed', { detail: { pos: this.current } }));
      }
      getCurrentPos() {
       
            /*this.stopProp(ev);*/
        return this.stateObj.state;
        /*this.get('arrayHour.s')*/
      }

    }
    window.customElements.define(PfProgressSlider.is, PfProgressSlider);
  </script>
</dom-module>

in configuration.yaml

 customize:
   sensor.slider_mon:
      custom_ui_state_card: pf-progress-slider

frontend:
  extra_html_url:
- /local/custom_ui/pf-progress-slider.html

sensor:
 - platform: template
    sensors:
      slider_mon:
        value_template: slider_mon

group:
  group_sliders:
    name: ' '   
    entities:
      - sensor.slider_mon

Here is problem with holding state after refresh web page (red settings in picture).
slider

I found this page with recorder (https://www.home-assistant.io/components/recorder/)
my settings:

recorder:
  include:
    entities:
      - sensor.slider_mon

But this solution doesn’t work.

Is it necessary this problem solves in pf-progress-slider or in configuration.yaml and how? Thank you for respond.