Mqtt controlled awning - add slider or percentage

Configuration Frontend
1

Hello,

I added my awning via MQTT to my configuration:

  - platform: template
    covers:
      terrace_awning:
        device_class: awning
        friendly_name: "Terrace Awning"
        open_cover:
          - service: mqtt.publish
            data:
              qos: "0"
              payload: "0" 
              topic: ccujack/incoming/set/CUX4000001/1/SET_STATE
          - service: mqtt.publish
            data:
              qos: "0"
              payload: "0" 
              topic: ccujack/incoming/set/CUX4000001/1/LEVEL
        close_cover:
          - service: mqtt.publish
            data:
              qos: "0"
              payload: "1" 
              topic: ccujack/incoming/set/CUX4000001/1/SET_STATE
          - service: mqtt.publish
            data:
              qos: "0"
              payload: "1" 
              topic: ccujack/incoming/set/CUX4000001/1/LEVEL
        stop_cover:
          - service: mqtt.publish
            data:
              qos: "0"
              payload: "true"
              topic: ccujack/incoming/set/CUX4000001/1/STOP

Everything works fine.
I would like to add a possibility to setting the position either using a slider or by specifying the percentage. I found this card on Github https://github.com/davidramosweb/home-assistant-custom-components-cover-time-based.

cover:
  - platform: cover_time_based
	devices:
	  room_rolling_shutter:
	   name: Room Rolling Shutter
	   travelling_time_down: 23
	   travelling_time_up: 25
	   open_switch_entity_id: switch.wall_switch_right
	   close_switch_entity_id: switch.wall_switch_left
	   aliases:
	    - room_rolling_shutter

Can anyone help me to put them together?

Thanks in advance
Andreas