Two radio-buttons behind a slider

Basically, i try to code a slider which has two invisible radio-buttons. The slider should move from one side to the other, depending on the used button. Also the check-boxes should appear correctly. Visually i want to achieve something like this: slider_example

I tried some different ways to get a proper result, but i'm not able to achieve this. The radio-buttons work by themselves, but they don't look like they should. I hope some of you can help me.

Greetings anz

First idea: http://ift.tt/1RPExFk
Second idea: http://ift.tt/1Kfzast

<div class="radios1">
  <input type="radio" id="radiobelebt" name="stimmung" class="css-checkbox" checked>
  <label for="radiobelebt" class="css-label">Belebt</label>
  <input type="radio" id="radioeinsam" name="stimmung" class="css-checkbox">
  <label for="radioeinsam" class="css-label">Einsam</label>
</div>