Why does my actionbutton and selectinput doesn't work in shinyapp? It doesn't show at all

In my shinydashboard, I need to put actionButton horizontally with my other selectInputs in a box. Below is my app. The actionButton does not seems to align well with other inputs. The button is in a little bit upper position. I do not understand why that happens. Does anyone know how to fix it?

library(shiny)
library(shinydashboard)


ui <- dashboardPage(
    dashboardHeader(title = "example"),
    dashboardSidebar(),
    dashboardBody(
        box(width=12,

            column(width = 3, dateRangeInput("order_dash_dateRange", "Date Range",
                                             start  = "2017-01-01",
                                             end    =  Sys.Date(),
                                             min    = "2001-01-01",
                                             max    = Sys.Date(),
                                             format = "mm/dd/yy",
                                             separator = " - ") ),

            column(width=3, selectizeInput(inputId = 'var', 
                                           label='Select variable',
                                           choices = c('cut', 'color'), 
                                           multiple=FALSE,
                                           options = list(
                                               maxItems = 1,
                                               placeholder = '',
                                               onInitialize = I("function() { this.setValue(''); }"))) ),
            column(width=3,  uiOutput("valueUI")),

            column(width=3,  actionButton('go', 'apply filter') )


        )
    )
)

server <- function(input, output, session) {

    output$valueUI = renderUI({

        if (input$var == '') {
            vals = '' 
        }
        if (input$var == 'cut') {
            vals = c('Premium', 'Good', 'Very Good', 'Fair')  
        }
        if (input$var == 'color'){
            vals = c('E', 'J', 'I', 'H')
        }

        selectizeInput(inputId = 'value', 
                       label='Select values',
                       choices = vals, 
                       multiple=FALSE,
                       options = list(
                           maxItems = 1,
                           placeholder = '',
                           onInitialize = I("function() { this.setValue(''); }")))

    })


}

shinyApp(ui, server)

adding 25px to top will align actionButton well.

actionButton('go', 'apply filter', style = 'margin-top:25px')

My problem is that selectInput clashes with the results of the actionButtons, since both are controlling the same object. How do I get them to work together? I don't want to use isolate() with selectInput and make users click an additional button; I would like the selection to change as soon as they select it. Thanks!

library(shiny)

ui <- fluidPage(

   mainPanel(

     actionButton("previous_q", 
                  "Previous"), 
     actionButton("next_q", 
                  "Next"), 
     selectInput("jump", 
                 "Jump to Question", 
                 choices = 1:10), 
     textOutput("selected")

   )
)

server <- function(input, output) {

  # Select based on "Previous" and "Next" buttons -------

  selected <- reactiveVal(1)

  observeEvent(input$previous_q, {

    newSelection <- selected() - 1
    selected(newSelection)

  })

  observeEvent(input$next_q, {

    newSelection <- selected() + 1
    selected(newSelection)

  })

  # Jump to selection (COMMENTED OUT SO APP DOESN'T CRASH) ----------------

  #observeEvent(input$jump, {

    #newSelection <- input$jump
    #selected(newSelection)

  #})

  # Display selected

  output$selected <- renderText({ 
    paste(selected())                     
  })
}

shinyApp(ui = ui, server = server)

The problem is that input$jump is a character string, not a number. Do:

observeEvent(input$jump, {

    newSelection <- as.integer(input$jump)
    selected(newSelection)

  })

Furthermore you don't need the reactiveVal() "selected". This also takes care about limiting your choices:

library(shiny)

selectInputChoices = 1:10

ui <- fluidPage(mainPanel(
  actionButton("previous_q",
               "Previous"),
  actionButton("next_q",
               "Next"),
  selectInput(
    "jump",
    "Jump to Question",
    choices = selectInputChoices,
    selected = 1
  ),
  textOutput("selected")
))

server <- function(input, output, session) {
  # Select based on "Previous" and "Next" buttons -------
  observeEvent(input$previous_q, {
    req(input$jump)
    if (as.integer(input$jump) > min(selectInputChoices)) {
      newSelection <- as.integer(input$jump) - 1
      updateSelectInput(session, inputId = "jump", selected = newSelection)
    }
  })

  observeEvent(input$next_q, {
    req(input$jump)
    if (as.integer(input$jump) < max(selectInputChoices)) {
      newSelection <- as.integer(input$jump) + 1
      updateSelectInput(session, inputId = "jump", selected = newSelection)
    }
  })

  # Display selected
  output$selected <- renderText({
    req(input$jump)
    paste(input$jump)
  })
}

shinyApp(ui = ui, server = server)