.slider{
   margin:1.5rem 0 1.5rem;
 }


/*レンジスライダーを使いやすいように*/
 #x1pos, #x2pos, #y1pos, #y2pos, #i_velocity{
  -webkit-appearance: none; /* 🚩これ無しだとスタイルがほぼ全く反映されないので注意 */
  appearance: none;
  cursor: pointer; /* カーソルを分かりやすく */
  outline: none; /* スライダーのアウトラインは見た目がキツイので消す */
  height: 2.0rem; /* バーの高さ */
  width: 30vw; /* バーの幅 */
  background: #CCCCCC; /*#8acdff;*/ /* バーの背景色 */
  border-radius: 15px; /* バーの両端の丸み */
  border: solid 0px #dff1ff; /* バー周囲の線 */
  display:inline-block;
  vertical-align: sub;
 }

/*レンジスライダーのつまみの設定*/ /* WebKit向けのつまみ */
#x1pos::-webkit-slider-thumb, #x2pos::-webkit-slider-thumb
, #y1pos::-webkit-slider-thumb, #y2pos::-webkit-slider-thumb, #i_velocity::-webkit-slider-thumb {
  -webkit-appearance: none; /*  🚩デフォルトのつまみのスタイルを解除 */
  background: #FFFFFF;/*#53aeff;*/ /* 背景色 */
  border: 1px solid #888888;
  width: 4rem;/*24px;*/ /* 幅 */
  height: 4rem; /* 高さ */
  border-radius: 50%; /* 円形に */
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
}