Mqtt slider button for switch

Configuration
1

I am having trouble with creating a simple MQTT slider to turn on and off a switch via MQTT. The switch is controlled via MQTT and is a JR-ZDS01. I have created the below config in configuration.yml however I can only only see it as two controllable icons not a slider. The icons work fine but want a slider like my other buttons I have for my Tasmotas.

I have so far worked out that it cant actually see the state of the switch.

  switch:
   - name: 'Office Light'
     unique_id: 'officelight'
     state_topic: 'zigbee2mqtt/switch/office'
     state_on: '{"state": "ON"}'
     state_off: '{"state": "OFF"}'
     command_topic: 'zigbee2mqtt/switch/office/set'
     payload_on: '{"state": "ON"}'
     payload_off: '{"state": "OFF"}'
     retain: true

Messages from zigbee2mqtt appear like follows:

Client (null) received PUBLISH (d0, q0, r0, m0, 'zigbee2mqtt/switch/office', ... (85 bytes))
{"linkquality":54,"power_on_behavior":"previous","state":"ON","switch_type":"toggle"}
2

First one comment:

This retains the command, not the state !

for your question, try adding

     optimistic: true

And another question, why don’t you use Zigbee2MQTT’s discovery ?

3

Thank you. Not understanding where I’m wrong with my configuration as the suggestion did not work.

However, the zigbee2mqtt discovery did work. It was very easy to get going in the end.