playing with bulma and bulma-extensions from R using the colon dataset from the survival package
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="https://unpkg.com/bulma@0.6.2/css/bulma.css" rel="stylesheet"/>
<link href="https://unpkg.com/bulma-extensions@1.0.4/bulma-switch/dist/bulma-switch.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bulma-extensions@1.0.4/bulma-checkradio/dist/bulma-checkradio.min.css" rel="stylesheet"/>
</head>
<body style="background-color:white;">
<div class="container">
<div class="columns">
<div class="column is-4">
<div class="box">
<div>age</div>
<div style="text-align: center;">
<input type="number" style="font-size: 2em; line-height: 1.5; width: 100px;" value="18" min="18" max="85"/>
to
<input type="number" style="font-size: 2em; line-height: 1.5; width: 100px;" value="85" min="18" max="85"/>
</div>
</div>
<div class="box">
<div>nodes</div>
<div style="text-align: center;">
<input type="number" style="font-size: 2em; line-height: 1.5; width: 100px;" value="0" min="0" max="33"/>
to
<input type="number" style="font-size: 2em; line-height: 1.5; width: 100px;" value="33" min="0" max="33"/>
</div>
</div>
<div class="box">
<div>time</div>
<div style="text-align: center;">
<input type="number" style="font-size: 2em; line-height: 1.5; width: 100px;" value="8" min="8" max="3329"/>
to
<input type="number" style="font-size: 2em; line-height: 1.5; width: 100px;" value="3329" min="8" max="3329"/>
</div>
</div>
</div>
<div class="column-is-4">
<div class="box">
<div>rx</div>
<div class="field">
<input id="rx-1" type="checkbox" name="rx-1" class="switch" checked="checked"/>
<label for="rx-1">Obs</label>
</div>
<div class="field">
<input id="rx-2" type="checkbox" name="rx-2" class="switch" checked="checked"/>
<label for="rx-2">Lev</label>
</div>
<div class="field">
<input id="rx-3" type="checkbox" name="rx-3" class="switch" checked="checked"/>
<label for="rx-3">Lev+5FU</label>
</div>
</div>
<div class="box">
<div>sex</div>
<div class="field">
<input id="sex-1" type="checkbox" name="sex-1" class="is-checkradio is-block is-success" checked="checked"/>
<label for="sex-1">female</label>
</div>
<div class="field">
<input id="sex-2" type="checkbox" name="sex-2" class="is-checkradio is-block is-success" checked="checked"/>
<label for="sex-2">male</label>
</div>
</div>
</div>
</div>
</div>
</body>
</html>