Добавить/удалить текст с помощью слайдера пользовательского интерфейса JQuery

Question

Я хочу добавить и удалить случайный текст в div с помощью слайдера JQuery UI. Он должен добавить текст, перемещая рукоятку ползунка в одном направлении, удаляя текст в другом направлении. Я прочитал API, но я не смог найти информацию о направленных событиях.

var rhetoric = ["lorem", "ipsum", "consectetur", "adipiscing"]; 
$(document).ready(function() { 
    $('#slider-vertical').slider({ 
    orientation: "vertical", 
    min: 0, 
    max: rhetoric.length - 1, 
    step: 1, 
    value: 3, 
    slide: function(event, ui) { 
     $("#ipsum-text").append(rhetoric[ui.value] + " "); 
    } 
    }); 
    $("#ipsum-text").val($("#slider-vertical").slider("value", 0)); 
}); 

jsFiddle Example

Answer 1

Я получил его! Я объединил solution from another thread. В принципе, вам нужно использовать изменение значения, чтобы вызвать добавление или удаление текста. Полный код ниже:

var rhetoric = ["lorem", "ipsum", "consectetur", "adipiscing"]; 
 
var last = 0; 
 

 
$(document).ready(function() { 
 
    $('#slider-vertical').slider({ 
 
    orientation: "vertical", 
 
    range: "min", 
 
    min: 0, 
 
    max: rhetoric.length, 
 
    step: 1, 
 
    value: rhetoric.length + 1, 
 
    slide: function(event, ui) { 
 
     if (ui.value < last) $("#ipsum-text").append('<span class="ipsum-item">' + rhetoric[ui.value] + '</span>&nbsp;'); 
 
     if (ui.value > last) $(".ipsum-item:last-child").remove(); 
 
     last = ui.value; 
 
    } 
 
    }); 
 
    $("#ipsum-text").val($("#slider-vertical").slider("value")); 
 
});