Thermostat widget

Hello,

I’ve the following code for my widget:

<div ng-init="sourceNames={
              '1': 'Thuis', 
              '2': 'Slapen', 
              '3': 'Weg', 
              '0': 'Comfort'}" />

<table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
  <tr>
    <td colspan="2">
      <h2 class="rzc-title">{{config.title}}</h2>
    </td>
  </tr>
  <div style="margin-left: 15px; margin-top: 10px">
   <div class="switch btn-group switch-leftborder">
    <button class="btn btn-default" style="width: 100%; height: 2em; font-size: 30px"
			ng-click="sendCmd('ToonSetpoint', itemValue('ToonSetpoint') * 1 - 0.5) ">
			<i class="glyphicon glyphicon-menu-down"></i>
		</button>
    <button class="btn btn-default" style="width: 100%; height: 2em; font-size: 30px">
            {{itemValue('ToonSetpoint')}}°C
    </button>
    <button class="btn btn-default" style="width: 100%; height: 2em; font-size: 30px"
			ng-click="sendCmd('ToonSetpoint', itemValue('ToonSetpoint') * 1 + 0.5) ">
			<i class="glyphicon glyphicon-menu-up"></i>
		</button>
   </div>
  <tr>
    <td>
      <div style="margin-left: 10px; width: 100%;" class="switch btn-group switch-leftborder" uib-dropdown>
        <button type="button" class="btn btn-default" style="width: 100%; height: 2em; font-size: 30px" uib-dropdown-toggle >
          <span>{{sourceNames[itemValue('ToonSetpointMode')]}} </span><span class="caret" id="rzc-caret"></span>
        </button>
        <ul class="dropdown-menu" style="margin-left: 15px; width: 100%;" id="rzc-zone-dropdown" uib-dropdown-menu role="menu" aria-labelledby="single-button">
          <li role="menuitem"><a ng-click="sendCmd(config.ToonSetpointMode, '1')">Thuis</a></li>
          <li role="menuitem"><a ng-click="sendCmd(config.ToonSetpointMode, '2')">Slapen</a></li>
          <li role="menuitem"><a ng-click="sendCmd(config.ToonSetpointMode, '3')">Weg</a></li>
          <li role="menuitem"><a ng-click="sendCmd(config.ToonSetpointMode, '0')">Comfort</a></li>
          </ul>
      </div>
    </td>
  </tr>
  </div></table>

But now the alignment isn’t correct while the setting of the buttons are the same. How can I correct this?
image

And I want a ceiling and floor value with steps of 0.5 and round off on 1 decimail place.

I found a example:

<div ng-init="slider = {
    minValue: {{'%.0f' | sprintf:itemValue('low_setting')}}, 
    maxValue: {{'%.0f' | sprintf:itemValue('high_setting')}}, 
    options: {
     floor: 0,
     ceil: 100,
     stem: 1
    }
  };"></div>

How can I insert this in my code?

anyone?