Gender input

by fxi

HTML

<form>
<label>Gender</label>
<div class="genders">
<span>Male</span>
<span>Neutral</span>
<span>Female</span>
</div>
<input type=range step=0.1 min=-1 max=1>
</form>

CSS

body, html {
  font-family: Helvetica, Tahoma, Arial, sans-serif;
  
}

form {
  width: 500px;
  background: #eee;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
input {
  width:100%;
}
label {
  
  font-size:1.1rem;
  
}

.genders {
  display: flex;
  justify-content: space-between;
}