dasher: range input for sound volume

app/views/setup/bits.scala

@@ -89,7 +89,7 @@ private object bits {
   def renderDissociatedRange(field: Field) =
     frag(
       renderInput(field)(cls := "range-value"),
-      input(name := s"${field.name}_range", tpe := "range")(cls := "range-slider")
+      input(name := s"${field.name}_range", tpe := "range")(cls := "range")
     )
 
   def renderLabel(field: Field, content: Frag) =

app/views/setup/filter.scala

@@ -56,7 +56,7 @@ object filter {
                     input(
                       name := s"${field.name}_range_min",
                       tpe := "range",
-                      cls := "range-slider rating-range__min",
+                      cls := "range rating-range__min",
                       min := RatingRange.min,
                       max := RatingRange.max
                     ),
@@ -64,7 +64,7 @@ object filter {
                     input(
                       name := s"${field.name}_range_max",
                       tpe := "range",
-                      cls := "range-slider rating-range__max",
+                      cls := "range rating-range__max",
                       min := RatingRange.min,
                       max := RatingRange.max
                     )

app/views/setup/forms.scala

@@ -36,7 +36,7 @@ object forms {
                   input(
                     name := s"${field.name}_range_min",
                     tpe := "range",
-                    cls := "range-slider rating-range__min"
+                    cls := "range rating-range__min"
                   ),
                   span(cls := "rating-min"),
                   "/",
@@ -44,7 +44,7 @@ object forms {
                   input(
                     name := s"${field.name}_range_max",
                     tpe := "range",
-                    cls := "range-slider rating-range__max"
+                    cls := "range rating-range__max"
                   )
                 )
               }

ui/common/css/form/_range.scss

@@ -17,7 +17,7 @@
   border-radius: .5em;
 }
 
-input[type=range] {
+input.range {
   -webkit-appearance: none;
   background: none;
   border: 0;

ui/dasher/css/_dasher.scss

@@ -157,12 +157,15 @@
       border-radius: $box-radius-size 0 0 $box-radius-size;
     }
 
-    .range {
-      // flex: 0 0 $slider-width;
-      // margin: 1rem 1.3rem 1rem 1rem;
+    input[type="range"] {
+      flex: 0 0 1em;
+      width: 1em;
+      margin: 1rem;
+      writing-mode: bt-lr;
+      -webkit-appearance: slider-vertical;
     }
 
-    &.silent .range {
+    &.silent input[type="range"] {
       opacity: 0.2;
     }
   }

ui/dasher/src/board.ts

@@ -87,6 +87,7 @@ export function view(ctrl: BoardCtrl): VNode {
               type: 'range',
               min: 100,
               max: 200,
+              step: 1,
               value: ctrl.readZoom()
             },
             hook: { 

ui/dasher/src/dasher.ts

@@ -24,7 +24,7 @@ export interface DasherData {
 
 export type Mode = 'links' | 'langs' | 'sound' | 'background' | 'board' | 'theme' | 'piece';
 
-const defaultMode = 'board';
+const defaultMode = 'links';
 
 export interface DasherCtrl {
   mode: Prop<Mode>;

ui/dasher/src/sound.ts

@@ -85,27 +85,28 @@ export function view(ctrl: SoundCtrl): VNode {
   }, [
     header(ctrl.trans('sound'), ctrl.close),
     h('div.content', [
-      h('div.slider', { hook: { insert: vn => makeSlider(ctrl, vn) } }),
+      h('input', {
+        attrs: {
+          type: 'range',
+          min: 0,
+          max: 1,
+          step: 0.01,
+          value: ctrl.box.getVolume(),
+          orient: 'vertical'
+        },
+        hook: {
+          insert(vnode) {
+            const input = vnode.elm as HTMLInputElement,
+            setVolume = debounce(ctrl.volume, 50);
+            $(input).on('input', () => setVolume(parseFloat(input.value)));
+          }
+        }
+      }),
       h('div.selector', ctrl.makeList().map(soundView(ctrl, current)))
     ])
   ]);
 }
 
-function makeSlider(ctrl: SoundCtrl, vnode: VNode) {
-  const setVolume = debounce(ctrl.volume, 50);
-  window.lichess.slider().then(() =>
-    $(vnode.elm as HTMLElement).slider({
-      orientation: 'vertical',
-      min: 0,
-      max: 1,
-      range: 'min',
-      step: 0.01,
-      value: ctrl.box.getVolume(),
-      slide: (_: any, ui: any) => setVolume(ui.value)
-    })
-  );
-}
-
 function soundView(ctrl: SoundCtrl, current: Key) {
   return (s: Sound) => h('a.text', {
     hook: bind('click', () => ctrl.set(s[0])),

ui/lobby/src/setup.ts

@@ -240,7 +240,7 @@ export default class Setup {
       $timeInput.add($incrementInput).each(function(this: HTMLInputElement) {
         const $input = $(this),
           $value = $input.siblings('span'),
-          $range = $input.siblings('.range-slider'),
+          $range = $input.siblings('.range'),
           isTimeSlider = $input.parent().hasClass('time_choice'),
           showTime = (v: number) => {
             if (v == 1 / 4) return '¼';
@@ -267,7 +267,7 @@ export default class Setup {
       $daysInput.each(function(this: HTMLInputElement) {
         var $input = $(this),
           $value = $input.siblings('span'),
-          $range = $input.siblings('.range-slider');
+          $range = $input.siblings('.range');
         $value.text($input.val() as string);
         $range.attr({
           min: '1',

ui/site/src/component/top-bar.ts

@@ -118,7 +118,7 @@ export default function() {
           playing
         })
       );
-    }).trigger('click');
+    });
   }
 
   { // cli