ползунок jquery изменить положение фона

Я изо всех сил пытаюсь установить и изменить положение фонового изображения с помощью слайдера jquery.

Мой слайдер неплохо работает со следующим кодом:

$(function() {
        $( "#slider" ).slider({
            value:5,
            min: 0,
            max: 10,
            step: 1,
            slide: function( event, ui ) {
                $( "#amount" ).val( ui.value );
            }
        });  
    $( "#amount" ).val( $( "#slider" ).slider( "value" ) );    
});

Однако теперь я хочу изменить положение фона изображения. Я добавил этот код:

$(".beer_slider").css("background-position").val( $( "#slider" ).slider( "value" ) );

Но на самом деле ничего не происходит!

Кто-то указал, что я должен включить следующие переменные:

var beer_slider = {
        "0": "-200px",
        "1": "-190px",
        "2": "-180px",
        "2": "-170px",
        "3": "-160px",
        "4": "-150px",
        "5": "-140px",
        "6": "-130px",
        "7": "-120px",
        "8": "-110x",
        "9": "-100x",
        "10": "-90x",
    };

Но я не знаю, как это назвать.

Любая помощь приветствуется