How can I made a slider that snaps to the grid and that shows its value on the right of the slider?

The following JavaScript should work for a single slider. It assumes you have 'Show value' selected for the question. Go to the cog icon to the left of the questions and select 'Add JavaScript...':

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
// the id of the question for referencing the value
var q_id = this.questionId;

// this is the new element that will contain the value of the slider
var value_box = QBuilder('div',{'style': 'float: right;'});

// this is question itself
var c = this.questionContainer;

// add the new element to the end of the question
c.appendChild(value_box);

// when the mouse moves up, update the value
Event.observe(c, 'mouseup', function(event)
{
// we can't use the 'this' keyword in here for the question
// so we grab the value from the tooltip
// note that the value 1 below refers to the choice index of the slider
value_box.innerHTML = $(q_id+'~1~toolTipBox').innerHTML;
});
});