まず、ページ全体の色ですが、bodyの背景色を指定してはどうですか？
#-----
「body」の「背景色」に黒色をDOMスタイル設定。
#-----


また、値指定バーの幅は、widthで指定出来ます。
掲載のコードでは、
#-----
"width":"20"px 
#-----
pxが""の外に出ちゃってるから反映されてないんですよ。
#-----
"width":"20px"
#-----
ですね。


あと、値指定バーにフォントサイズや文字色の設定をしようとされてるみたいですが、値指定バーに文字は無いので無効ですよね。
値指定バーにタイトルみたいのを付けたいのならば、ラベルなどで別途付ける必要があります。


background-colorの指定は、値指定バーの部分だけ地の色を灰色にしたいということですよね？
値指定バーみたいなGUIっぽい要素は、複数の要素を組み合わせて作られており、Webコンポーネントとしてラップされていて、その見た目はブラウザ側でよきように設定されています。
ブラウザや端末が違えば、見た目が違っているかも知れないとゆうことです。
それで、ガチでかっこいいブラウザアプリを作ろうという場合には、ブラウザ固有のスタイル設定を無しにして、１から自分で設定したりするんですけど、まあまあ大変です。
お手軽に背景色だけ設定しようとかは出来ません。全部、たとえばクリックした時と離した時とで色が変わるなども全てやっていかなきゃならなくなります。

で、お手軽に背景色だけを設定したいなぁ、なんなら枠で囲いたいなぁなんて場合には、div要素で囲って、それに背景色や枠線を設定するのが良いです。
こんな感じ？
#--------------------------------
「body」の「背景色」に黒色をDOMスタイル設定。
母艦＝DOM親要素。

Rベース＝「div」のDOM部品作成。
RベースへDOM親要素設定。
Rラベル＝「テスト：」のラベル作成。
R＝100の値指定バー作成。

Rベースに{
　　　　//位置はベースで設定。
　　　　"position": "relative",//相対位置への配置
　　　　"左": "350px"　//メインキャンバスの幅だけ左に
　　　　"top": "-280px"
　　　　"幅":"150px"　//ラベル分を加味した幅
　　　　//背景色やボーダーの設定
　　　　"背景色": "#eee" 
　　　　"ボーダー": "solid 1px"
　　　　"余白":"8px"
　　　　"border-radius":"4px"//角丸
}をDOMスタイル一括設定。

Rラベルに{
　　　　"文字サイズ": "14px"
　　　　"色": "333"
}をDOMスタイル一括設定。

Rに{
　　　　"cursor":　"pointer"
　　　　"幅":"80px"
　　　　}をDOMスタイル一括設定 
#--------------------------------